如何将背景位置设置为从右开始的绝对距离？ [复制]答案

【问题标题】：How to set the background-position to an absolute distance, starting from right? [duplicate]如何将背景位置设置为从右开始的绝对距离？ [复制]
【发布时间】：2010-09-11 23:39:23
【问题描述】：

我想为一个 div 设置一个背景图片，它位于 div 的上方RIGHT，但与顶部和右侧的距离固定为10px。

如果想要在 div 的上部 LEFT 中，我会这样做：

背景：url(images/img06.gif) no-repeat 10px 10px;

有没有办法达到同样的效果，但在上方RIGHT显示背景？

【问题讨论】：

标签： css

【解决方案1】：

在所有现代浏览器和 IE 甚至版本 9 中，您都可以使用四值语法，specified in CSS3：

background-position: right 10px top 10px;

来源：MDN

【讨论】：

这是一个比玩边距更有用的解决方案。
这比绿色打勾的解决方案更好。

【解决方案2】：

您可以用像素边框伪造右侧的空间（大部分时间是白色的，或者可能是其他东西）

  background-image: url(../images/calender.svg) center right
  border-right: 5px white solid

【讨论】：

【解决方案3】：

不知道纯css是否可以，大家可以试试

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

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

【讨论】：

【解决方案4】：

正确的格式是：

background: url(YourUrl) 0px -50px no-repeat;

其中0px 是水平位置，-50px 是垂直位置。

CSS background-position 接受负值。

【讨论】：

【解决方案5】：

您可以使用百分比：

background: url(...) top 98% no-repeat;

如果您知道父 div 的宽度，应该很容易确定您需要使用的百分比。

【讨论】：

我惊讶地发现背景图像的 100% 与 'right' 相同，但是如果父 div 的宽度是固定的，那么直接使用像素偏移会更准确.
如果你有不同的宽度，没有百分比不起作用

【解决方案6】：

使用前面提到的规则以及顶部和右侧边距：

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

背景图片只出现在内边距内，而不是边距内。如果添加边距不是一个选项，您可能不得不求助于另一个 div，尽管我建议您仅将其用作最后的手段，以尽可能保持您的标记精简和语义。

【讨论】：

这是一个很好的解决方案，但由于我想显示边框，因此需要包装另一个非语义 div。我最终使用了标签而不是 css 背景，这对我来说效果很好。
就我而言，我发现padding-top 和padding-right 是在跨度之后定位小图标的解决方案。
这可以工作，但它有其他副作用。背景颜色不会跨越整个元素，您也不能在元素中包含填充最后 10px 的文本。

【解决方案7】：

一种解决方案是绝对定位一个空的div，并为其提供背景。我不相信有一种方法可以纯粹使用 CSS，不更改图像，并且在流畅的布局中没有额外的标记。

【讨论】：

【解决方案8】：

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

如果可能的话，自己算算。您已经知道图像的尺寸。如果你知道 div 的尺寸，你可以把图片放在 (div width - image width - 10, div height - image height - 10)。
使用 Javascript 为您完成繁重的工作。与上面的方法几乎相同，只是您不需要知道 div 本身的尺寸。 Javascript 可以告诉你。
一种更骇人听闻的方法是在图像的顶部和右侧放置一个 10 像素的透明边框，并将位置设置为 top right。

【讨论】：

透明边框没那么骇人听闻！没有额外的标记，没有边框等问题。
绕过其他黑客的黑客仍然是黑客;)