css3 - 如何实现 CSS 背景图片相对右边或者下边定位

Question

我们用 right 使背景图片右对齐，当背景所在节点的宽度高度不是固定时，但我想让他距离右边 10px，距离下边 10px，有没有好的实现方法？
CSS

.loading {
background: url(loading.gif) right bottom no-repeat;
}

HTML

<p class="box loading">some text</p>

Answer 1

This should be done by directly operating the box. If there is content, directly set the padding-right and padding-bottom of the box, and then let the picture be displayed in the lower right corner. 0_0.... The general idea is Control the position of the background through boxes.

I didn’t expect there was something else in your box

.loading { 
    /*box position*/
    position:fixed; 
    right:10px; 
    bottom:10px; 
    /*background*/
    width:30px;
    height:30px;
    background:url(loading.gif) no-repeat; 
}

Answer 2

Background seems not to solve your problem. I don’t know if you want to be compatible with ie6, position:fixed; this attribute is invalid in ie6. If the requirements cannot be changed, I will add a relative positioning to the box, and then put the picture in and then position it absolutely. In this way, the compatibility will be no problem and this problem will be solved.

Answer 3

.loading {
    background-image: url(loading.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -10px -10px;
}

But I think this has a lot to do with the size of the picture, for reference