定位CSS背景图像x右边的像素？

Question

我认为答案是否定的,但是你可以用CSS定位背景图像,这样它就是远离右边的固定数量的像素吗？

如果我设置background-positionx和y的值,那么它们似乎只分别从左侧和顶部进行固定像素调整.

Answer 1

background-position: right 30px center;

它适用于大多数浏览器.请参阅:http://caniuse.com/#feat=css-background-offsets以获取完整列表.

更多信息:http://www.w3.org/TR/css3-background/#the-background-position

Answer 2

可以使用属性border作为右侧的长度

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

Answer 3

有一种方法,但每个浏览器都不支持它(请参阅此处的报道)

element {
  background-position : calc(100% - 10px) 0;
}

它适用于所有现代浏览器,但有可能IE9崩溃.= <IE8也没有报道.

Answer 4

据我所知,CSS规范当然没有提供你在CSS表达式之外所要求的确切内容.假设你不想使用表达式或Javascript,我看到了三个hackish解决方案:

• 确保您的背景图像与容器的大小(至少在宽度上)相匹配并设置background-repeat: repeat或者repeat-x仅均衡宽度.然后,x从右边出现像素的东西就像这样简单background-position: -5px 0px.
• 使用background-position展示特殊行为的百分比,比这里描述的更好.试一试.基本上,background-position: 90% 50%将使背景图像的右边缘与容器的右边缘对齐10%.
• 创建一个包含图像的div.position: relative如果尚未设置,则显式设置包含元素的位置.将图像容器设置为position: absolute; right: 10px; top: 10px;,显然可以根据需要调整最后两个.将图像div容器放入包含元素中.

Answer 5

试试这个:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

请注意,上面的代码将从右侧移动整个元素(仅限背景图像)5px.这可能适用于您的情况.

Answer 6

你可以在CSS3中做到这一点:

background-position: right 20px bottom 20px;

它适用于Firefox,Chrome,IE9 +

资料来源:MDN

Answer 7

图像解决方法右侧有透明像素,可用作右边距.

同样的图像解决方法是创建PNG或GIF图像(支持透明度的图像文件格式),图像右侧的透明部分恰好等于您想要给出右边距的像素数(例如:5px,10px等)

这在固定宽度和百分比宽度上都能很好地协同工作.实际上是手风琴标题的一个很好的解决方案,在标题右侧有正/负或上/下箭头图像!

缺点:不幸的是,你不能使用JPG,除非容器的背景部分和CSS背景图像的背景颜色是相同的平面颜色(没有渐变/晕影),主要是白/黑等.

Answer 8

如果你碰巧在现代浏览器的这些日子里偶然发现了这个话题,你可以使用伪类:后来做任何与背景有关的事情.

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

这个css会将背景放在".container"元素的右下角,右侧有20px的空间.

看到这个小提琴,例如http://jsfiddle.net/h6K9z/226/

Answer 9

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

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 10

如果只想指定 x 轴，可以执行以下操作：

background-position-x: right 100px;