使用CSS从右侧偏移背景图像

Question

有没有办法将背景图像从其元素的右侧定位一定数量的像素？

例如,要从左侧定位一定数量的像素(例如10),我就是这样做的:

#myElement {
    background-position: 10px 0;
}

Answer 1

我发现这个CSS3功能很有帮助:

/* to position the element 10px from the right */
background-position: right 10px top;

据我所知,IE8不支持此功能.在最新的Chrome/Firefox中它运行正常.

有关支持的浏览器的详细信息,请参阅我可以使用

使用来源:http://tanalin.com/en/blog/2011/09/css3-background-position/

Answer 2

!过时的答案,因为CSS3带来了这个功能

有没有办法将背景图像从其元素的右侧定位一定数量的像素？

不.

流行的解决方法包括

• margin-right而是在元素上设置a
• 向图像本身添加透明像素并定位它 top right
• 或者在元素的宽度已知之后使用jQuery计算位置.

Answer 3

最简单的解决方案是使用百分比.这不是你要求的答案,因为你要求像素精度,但如果你只是需要在右边缘和图像之间有一点填充,给一些99%的位置通常效果很好.

码:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Answer 4

过时的答案:它现在在主流浏览器中实现,请参阅此问题的其他答案.

CSS3修改了规范,background-position以便它可以用于不同的原点.不幸的是,我找不到任何证据表明它已在任何主流浏览器中实现.

http://www.w3.org/TR/css3-background/#the-background-position 参见例12.

background-position: right 3em bottom 10px;

Answer 5

正如这里提出的,这是一个非常完美的跨浏览器解决方案:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

我使用它,因为在答案中提出的指定偏移量的CSS3功能标记为解决问题在浏览器中不太受支持.例如

Answer 6

在最合适的答案是背景,地位的新的四值的语法,但直到所有的浏览器都支持你的最好的办法是按以下顺序较早响应的组合:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

Answer 7

一个简单但又脏的技巧是简单地将您想要的偏移量添加到您用作背景的图像中.它不可维护,但它完成了工作.

Answer 8

这将适用于大多数现代浏览器......除了IE (浏览器支持).即使该页面列出支持的= = IE9,我的测试也不同意.

您可以像这样使用calc()css3属性;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

对我来说,这是获得正确利润的最清洁,最合理的方式.我还使用了border-right: 10px solid transparent;用于IE 的后备.

Answer 9

background-position: calc(100% - 8px);