如何从右边开始将背景位置设置为绝对距离？

Question

我想设置一个背景图像一个div,在某种程度上,这是在上RIGHT的div,但有固定10px的顶部和右侧的距离.

如果想要它在div 的上部LEFT中,我将如何做到这一点:

background: url(images/img06.gif) no-repeat 10px 10px;

反正是有达到同样的效果,但显示在上背景RIGHT？

Answer 1

在Firefox,IE9和Opera 10.5中,您可以使用CSS3中指定的四值语法:

background-position: right 10px top 10px;

资料来源:MDN

Answer 2

使用前面提到的规则以及上边距和右边距:

background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;

背景图像仅出现在填充内,而不是边距.如果添加保证金不是一个选项,您可能不得不诉诸另一个div,虽然我建议您只使用它作为最后的手段尝试保持您的标记尽可能精益和sementic.

Answer 3

有几种方法可以做到这一点.

1. 如果可能的话,自己做数学.您已经知道图像的尺寸.如果你知道div的尺寸,你可以把图像放在(div宽度 - 图像宽度 - 10,div高度 - 图像高度 - 10).

2. 使用Javascript为您做繁重的工作.几乎与上面相同的方法,除了你不需要知道div本身的维度.Javascript可以告诉你.

3. 一种更为骇人的方式是在图像的顶部和右侧放置一个10px的透明边框,并将位置设置为top right.

Answer 4

我不知道纯css是否可行,所以你可以试试

background: url(images/img06.gif) no-repeat top right;

并修改您的图像,在顶部和右侧以透明颜色合并10px边框