有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
当前回答
是的!好吧,把背景图片从浏览器的右边定位成0px,而不是左边-我使用:
background-position: 100% 0px;
其他回答
最合适的答案是background-position的新四值语法,但在所有浏览器都支持它之前,最好的方法是按照以下顺序组合之前的响应:
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+ */
过时的答案:它现在在主要浏览器中实现,请参阅 这个问题还有其他答案。
CSS3修改了背景位置的规格,使它可以在不同的原点上工作。不幸的是,我找不到任何证据表明它已经在任何主流浏览器中实现。
http://www.w3.org/TR/css3-background/#the-background-position 参见例12。
background-position: right 3em bottom 10px;
如果你有比例元素,你可以使用:
.valid {
background-position: 98% center;
}
.half .valid {
background-position: 96% center;
}
在这个例子中,.valid将是带有图片的类,而.half将是只有标准行一半大小的行。
有点脏,但很有魅力,而且还可以控制。
这将适用于大多数现代浏览器…除了IE(浏览器支持)。尽管该页面列出了支持>= IE9,但我的测试并不同意这一点。
你可以像这样使用calc() css3属性;
.class_name {
background-position: calc(100% - 10px) 50%;
}
对我来说,这是最干净、最合乎逻辑的方式来实现向右的边缘。我还使用了border-right: 10px solid transparent;IE。
是的!好吧,把背景图片从浏览器的右边定位成0px,而不是左边-我使用:
background-position: 100% 0px;