有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
当前回答
正如这里提出的,这是一个非常完美的跨浏览器解决方案:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
我之所以使用它,是因为浏览器还不太支持CSS3的特性,即在标记为解决问题的答案中指定偏移量。如。
其他回答
使用中心右边的位置,然后添加一个透明的边界来抵消它?
我发现这个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/
更新:
现在所有主流浏览器都支持该功能,包括移动浏览器。
!! 过时的答案,因为CSS3带来了这个功能
有一种方法来定位背景图像从其元素的右边一定数量的像素?
不。
流行的变通方法包括
改为在元素上设置右边距 为图像本身添加透明像素,并将其定位在右上方 或者在元素宽度已知后使用jQuery计算位置。
正如这里提出的,这是一个非常完美的跨浏览器解决方案:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
我之所以使用它,是因为浏览器还不太支持CSS3的特性,即在标记为解决问题的答案中指定偏移量。如。
是的!好吧,把背景图片从浏览器的右边定位成0px,而不是左边-我使用:
background-position: 100% 0px;