将CSS背景图片放置在距离右边x像素的位置？

适用于所有实际的浏览器（和IE9 +）：

background-position: right 10px top 10px;

我将其用于RTL WordPress主题。参见示例：临时网站或真实网站即将上线。查看大DIV右上角的图标。

这在Chrome 27中有效，我不知道它是否有效或其他浏览器如何处理。我对此感到惊讶。

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

从我的角度来看，从左侧调整百分比有些微弱。当我需要这样的东西时，我倾向于将容器样式添加到wrapper元素，然后使用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班是可选的，可以让你的内容吃进填充如果需要的话（阴性切缘值应在包装填充匹配相应的值）。它有点冗长，但是可以可靠地工作，而不必考虑图像相对于其宽度和高度的相对位置。

自从问了这个问题以来，它就很久了，但是我遇到了这个问题，我这样做是：

background-position:95% 50%;

我没有提到的另一个解决方案是使用伪元素，我相信该解决方案可以与任何符合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;
}

示例：元素，例如 正方形大小100像素（不考虑边框）的填充为10像素，背景图片应显示在右侧填充内。这意味着伪元素是一个80像素大小的正方形。我们要使用right：-10px;将其粘贴到元素的右边界。。如果我们想使背景图像距右边界5px，则需要使用right：-5px将伪元素距元素的右边界5px ；...在这里进行自我测试：http：//jsfiddle.net/yHucT/

如果容器的高度固定： Tweek将百分比（背景位置）放到正确的高度。

如果容器具有动态高度： 如果要在背景和容器之间设置填充（例如，在定制样式输入时进行选择），则将填充添加到图像中，并将背景位置设置为右侧或底部。

我在尝试获取选择框的背景以使其距我的选择右侧5 px时遇到了这个问题。就我而言，我的背景是向下的箭头，它将替换基本的下拉图标。在我的情况下，背景的填充将始终保持相同（从右侧起5-10像素），因此可以很容易地进行修改以将实际的背景图像带到右侧（将其尺寸扩大5-10像素）。

希望这可以帮助！

您可以在编辑器中将背景图像放置在从右侧开始为x像素的位置。

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

背景图像将位于右上角，但看起来将是右x像素。

我正在尝试执行类似的任务，以始终在表标题的右侧获得一个下拉箭头，并提出了一个在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

只需将像素填充放入图像中-在photohop中将10px或其他值添加到图像的画布大小，然后在CSS中将其正确对齐。

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

background-position-x: right 100px;

如果您在当今的现代浏览器中偶然发现了这个主题，则可以使用伪类：after在背景上进行任何实际操作。

.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/

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

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+ */

使用右侧透明像素作为右侧边距的图像解决方法。

图像的解决方法是创建一个PNG或GIF图像（支持透明性的图像文件格式），该图像的透明部分在图像的右侧与您要给其右边空白的像素数完全相等。例如：5px，10px等）

这在固定宽度以及百分比宽度上都可以很好地一致地工作。对于手风琴头在右侧的正/负或上/下箭头图像，实际上是一个很好的解决方案！

缺点：不幸的是，除非容器的背景部分和CSS背景图像的背景颜色具有相同的纯色（没有渐变/渐晕），大部分是白色/黑色等，否则不能使用JPG。

尝试这个：

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

请注意，尽管上面的代码会将整个元素（不只是背景图片）从右侧移5px。这可能适合您的情况。

您可以在CSS3中做到这一点：

background-position: right 20px bottom 20px;

它适用于Firefox，Chrome，IE9 +

资料来源：MDN

有一种方法，但并非所有浏览器都支持（请参见此处的覆盖范围）

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

它可以在每种现代浏览器中使用，但IE9可能会崩溃。也没有覆盖= <IE8。

据我所知，CSS规范当然不能完全满足您在CSS表达式之外的要求。在您不想使用表达式或Javascript的假设下，我看到了三种令人毛骨悚然的解决方案：

• 确保您的背景图片与容器的大小匹配（至少在宽度上）并设置，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;，显然可以根据需要调整最后两个。将image div容器放入包含元素。

background-position: right 30px center;

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

详细信息：http : //www.w3.org/TR/css3-background/#the-background-position