有一种方法来定位背景图像从其元素的右边一定数量的像素?

例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:

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

当前回答

是的!好吧,把背景图片从浏览器的右边定位成0px,而不是左边-我使用:

background-position: 100% 0px;

其他回答

最简单的解决方案是使用百分比。这并不是您想要的答案,因为您要求的是像素精度,但如果您只是需要在右边缘和图像之间有一些填充,那么给出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;
}

如果你有比例元素,你可以使用:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

在这个例子中,.valid将是带有图片的类,而.half将是只有标准行一半大小的行。

有点脏,但很有魅力,而且还可以控制。

我的问题是,当窗口调整大小时,我需要背景图像与右侧边界保持相同的距离,例如平板电脑/手机等 我的解决方案是像这样使用一个百分比:

background-position: 98% 6px;

它会固定在原地。

过时的答案:它现在在主要浏览器中实现,请参阅 这个问题还有其他答案。

CSS3修改了背景位置的规格,使它可以在不同的原点上工作。不幸的是,我找不到任何证据表明它已经在任何主流浏览器中实现。

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

background-position: right 3em bottom 10px;

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

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

我之所以使用它,是因为浏览器还不太支持CSS3的特性,即在标记为解决问题的答案中指定偏移量。如。