使用CSS从右侧偏移背景图像

！! 过时的答案，因为CSS3带来了这个功能

有一种方法来定位背景图像从其元素的右边一定数量的像素?

不。

流行的变通方法包括

• 在元素上设置margin-right
• 为图像本身添加透明像素，并将其定位为top right
• 或者在元素宽度已知后使用jQuery计算位置。

如果我明白你的要求你会这样做;

你有一个名为#main-container和.my-element的DIV容器。用这个来开始吧;

#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;
}

顺便说一下，如果您在页面中引用较低级别的元素，最好使用类(我假设您因此而更改了上面的名称)。

过时的答案:它现在在主要的浏览器中实现，请参阅 这个问题的其他答案。

CSS3修改了background-position的规范，以便它可以在不同的原点上工作。不幸的是，我找不到任何证据表明它已经在任何主流浏览器中实现。

http://www.w3.org/TR/css3-background/#the-background-position

background-position: right 3em bottom 10px;

最简单的解决方案是使用百分比。这并不是您想要的答案，因为您要求的是像素精度，但如果您只是需要在右边缘和图像之间有一些填充，那么给出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;
}

CSS3规范允许背景位置的不同来源现在在Firefox 14中得到支持，但在Chrome 21中仍然不支持(显然IE9部分支持它们，但我自己没有测试过)

一个简单但肮脏的技巧是简单地添加你想要作为背景的图像的偏移量。它是不可维护的，但它可以完成工作。

使用中心右边的位置，然后添加一个透明的边界来抵消它?

我发现这个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/

更新:

现在所有主流浏览器都支持该功能，包括移动浏览器。

这将适用于大多数现代浏览器…apart from IE (浏览器支持)。尽管该页面列出了支持>= IE9，但我的测试并不同意这一点。

你可以像这样使用calc() css3属性;

.class_name {
background-position: calc(100% - 10px) 50%;
}

对我来说，这是最干净、最合乎逻辑的方式来实现向右的边缘。我还在IE中使用了border-right: 10px solid transparent;。

正如在这里所提议的，这是一个非常完美的跨浏览器解决方案:

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

我之所以使用它，是因为浏览器还不太支持CSS3的特性，即在标记为解决问题的答案中指定偏移量。如。

如果你有一个固定宽度的元素，并且知道你的背景图像的宽度，你可以简单地设置background-position为:元素的宽度-图像的宽度-你想要在右边的间隙。

例如:对于一个100px宽的元素和一个300px宽的图像，要在右侧获得10px的间隙，您将其设置为100-300-10=-210px:

#myElement {
background:url(my_image.jpg) no-repeat -210px top;
width:100px;
}

你在元素的左边得到了图像最右边的80像素，在右边有一个20px的间隙。

我知道这听起来很愚蠢，但有时它节省了时间……我用垂直的方式(在底部的差距)导航链接与文字下面的图像。

但不确定这适用于你的案子。

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

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

我的问题是，当窗口调整大小时，我需要背景图像与右边框保持相同的距离，即平板电脑/手机等 我的修复是使用这样的百分比:

background-position: 98% 6px;

它会固定在原地。

如果你有比例元素，你可以使用:

.valid {
background-position: 98% center;
}


.half .valid {
background-position: 96% center;
}

在这个例子中，.valid将是带有图片的类，而.half将是一个只有标准行一半大小的行。

有点脏，但很有魅力，而且还可以控制。

是的!好吧，把背景图片从浏览器的右边定位成0px，而不是左边-我使用:

background-position: 100% 0px;

如果你想使用这个添加箭头/其他图标到一个按钮，那么你可以使用css伪元素?

如果它真的是整个按钮的背景图像，我倾向于将间距合并到图像中，并使用

background-position: right 0;

但如果我必须添加一个设计的箭头到一个按钮，我倾向于有这样的html:

<a href="[url]" class="read-more">Read more</a>

并倾向于用CSS做以下事情:

.read-more{
position: relative;
padding: 6px 15px 6px 35px;//to create space on the right
font-size: 13px;
font-family: Arial;
}


.read-more:after{
content: '';
display: block;
width: 10px;
height: 15px;
background-image: url('../images/btn-white-arrow-right.png');
position: absolute;
right: 12px;
top: 10px;
}

通过使用:after选择器，我使用CSS添加了一个元素来包含这个小图标。你也可以通过在a元素中添加一个span或<i>元素来做到这一点。但我认为这是一种向按钮添加图标的更简洁的方式，而且它是跨浏览器支持的。

你可以在这里检查小提琴: http://codepen.io/anon/pen/PNzYzZ < / p >

background-position: calc(100% - 8px);