有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
当前回答
这将适用于大多数现代浏览器…除了IE(浏览器支持)。尽管该页面列出了支持>= IE9,但我的测试并不同意这一点。
你可以像这样使用calc() css3属性;
.class_name {
background-position: calc(100% - 10px) 50%;
}
对我来说,这是最干净、最合乎逻辑的方式来实现向右的边缘。我还使用了border-right: 10px solid transparent;IE。
其他回答
我的问题是,当窗口调整大小时,我需要背景图像与右侧边界保持相同的距离,例如平板电脑/手机等 我的解决方案是像这样使用一个百分比:
background-position: 98% 6px;
它会固定在原地。
如果我明白你的要求你会这样做;
你有一个名为#main-container的DIV容器和其中的。my-element。用这个来开始吧;
#main-container {
position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
position:absolute;
top:0;
right:10px;
}
/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
float:right;
margin-right:10px;
}
顺便说一下,如果您在页面中引用较低级别的元素,最好使用类(我假设您因此而更改了上面的名称)。
如果你有比例元素,你可以使用:
.valid {
background-position: 98% center;
}
.half .valid {
background-position: 96% center;
}
在这个例子中,.valid将是带有图片的类,而.half将是只有标准行一半大小的行。
有点脏,但很有魅力,而且还可以控制。
我发现这个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/
更新:
现在所有主流浏览器都支持该功能,包括移动浏览器。
最简单的解决方案是使用百分比。这并不是您想要的答案,因为您要求的是像素精度,但如果您只是需要在右边缘和图像之间有一些填充,那么给出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;
}