定位CSS背景图像x像素从右边?

小开

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

确保你的背景图像匹配容器的大小(至少在宽度上)，如果宽度是相等的，则设置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容器放入包含元素中。

小开

试试这个:

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

注意上面的代码会将整个元素(不仅仅是背景图像)向右移动5px。这对你的案子来说可能没问题。

小开

如果容器有固定高度: 微调百分比(背景-位置)，直到它正确匹配

如果容器有动态高度: 如果你想在你的背景和容器之间填充(比如当自定义样式输入时，选择)，将你的填充添加到你的图像，并将背景位置设置为右侧或底部。< / p >

当我试图让一个选择框的背景适合我选择的右边5像素时，我偶然发现了这个问题。在我的例子中，我的背景是一个箭头，它将取代基本的下拉图标。在我的例子中，背景的填充将始终保持不变(右边5-10个像素)，所以对实际的背景图像进行修改是很容易的(使右侧的尺寸宽5-10个像素)。

希望这能有所帮助!

小开

background-position: right 30px center;

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

小开

图像工作与透明像素在右边作为右边缘。

图像的变通方法是创建一个PNG或GIF图像(支持透明度的图像文件格式)，在图像的右侧有一个透明的部分，恰好等于你想要给予右边距的像素数(例如:5px, 10px等)。

这在固定宽度和百分比宽度上一致地工作。实际上，这是一个很好的解决方案，手风琴头有一个加/减或向上/向下箭头图像在头的右边!< / p >

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

小开

求负值的解。调整右填充来移动图像。

<div style='overflow:hidden;'>


<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>


</div>


</div>

小开

只需将像素填充到图像中-在photohop中添加10px或任何图像的画布大小，并在CSS中对齐它。

小开

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

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

小开

您可以在编辑器中将背景图像定位为距离右侧x像素。

background: url(images_url) no-repeat right top;

背景图像将位于右上方，但将显示为距离右侧x个像素。

小开

从左边调整百分比对我来说有点脆弱。当我需要这样的东西时，我倾向于将我的容器样式添加到包装器元素，然后用background-position: right bottom在内部元素上应用背景

<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>


<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>

.content-breakout类是可选的，如果需要，将允许您的内容进入填充(负边距值应匹配包装器填充中的相应值)。这有点冗长，但工作可靠，无需考虑图像相对于其宽度和高度的相对位置。

小开

有一种方法，但不是每个浏览器都支持(参见覆盖在这里)

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

它适用于每一个现代浏览器，但IE9可能会崩溃。也不包括=<IE8。

小开

这个问题已经被问到很久了，但我刚刚遇到了这个问题，我是这样做的:

background-position:95% 50%;

小开

如果你碰巧在现代浏览器中碰到这个话题，你可以使用伪类:after来做任何与后台相关的事情。

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

这个CSS会把背景放在“”的右下角。元素的右侧有20px的空间。

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

小开

这在Chrome 27中工作，我不知道它是否有效，也不知道其他浏览器能做什么。我对此感到很惊讶。

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

小开

适用于所有真正的浏览器(以及IE9+):

background-position: right 10px top 10px;

我用它来RTL WordPress主题。参见示例:临时的网站或真正的网站将很快启动。

小开

最恰当的回答是用于后台位置的新的四值语法，但在所有浏览器支持它之前，您的最佳方法是按照以下顺序组合先前的响应:

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中这样做:

background-position: right 20px bottom 20px;

它适用于Firefox, Chrome, IE9+

来源:中数

小开

我试图做一个类似的任务，让一个下拉箭头总是在表头的右侧，并提出了这个似乎在Chrome和Firefox中工作，但safari告诉我这是一个无效的属性。

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

在检查器中折腾了一番之后，我想出了这个跨浏览器的解决方案，它适用于IE8+、Chrome、Firefox和Safari，以及响应式设计。

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

这里是它的外观和工作方式的代码依赖。Codepen是用SCSS - http://cdpn.io/xqGbk编写的

小开

对大家都好

background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;

小开

另一个我没有看到提到的解决方案是使用伪元素，我相信这个解决方案将适用于任何CSS 2.1兼容的浏览器(≥IE8，≥Safari 2，…)，它也应该是响应:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

例子:元素eg。一个100px大小的正方形(不考虑边界)有10px的填充，背景图像应该显示在右边的填充中。这意味着伪元素是一个80px大小的正方形。我们想把它放在右:-10 px;元素的右边界上。如果我们想让背景图像距离右边界5px，我们需要将伪元素与右:5 px;元素的右边界5px… 在这里自己测试:http://jsfiddle.net/yHucT/

小开

如果你只想指定x轴，你可以这样做:

background-position-x: right 100px;