我知道我可以像这样在背景图像上设置负左位置：
#element {
background: url(image.png) -20px 0 no-repeat;
}
无论#element 的宽度如何，这会将背景图像定位在#element 左边缘的左侧20 像素处。
但是有没有办法设置一个负的right位置，没有给#element一个固定的宽度（然后只设置一个高的正左值）？
【问题讨论】：
标签： css background-image background-position
这种效果不可能通过简单的 CSS 获得，这根本不是真的。无需使用不必要的伪元素或多个 div 使您的标记复杂化。
您可以使用 CSS 中的“calc”函数让浏览器计算 100% 的容器宽度，然后像这样添加负边距（记得将负边距添加到 100% not 减去它）：
background-position: calc(100% + 20px) 0;
或者，如果您更喜欢简写格式的标记：
background: url("image.png") calc(100% + 20px) 0 no-repeat;
这会将您的背景图像定位在其容器左侧 100% 的位置（从而获得与使用 background-position: right 相同的效果），并在其中添加 20px，您将获取您的负右边距。
你可以在这个 jsFiddle 中看到函数如何表现的演示：http://jsfiddle.net/58u665fe/
大多数主要浏览器都支持“计算”功能，但在某些情况下缺乏对 IE9http://caniuse.com/#feat=calc阅读更多关于哪些浏览器支持这个功能。
【讨论】：
你想做的事不可能以你想做的方式。
一种解决方法可能是创建一个具有position: relative; 属性的父 div，然后对另一个 div 进行 z-index 处理，该 div 包含您的内容。
<style>
#parent {
position: relative;
}
#background {
background: url(img.png) top left no-repeat;
position: absolute;
top: 0;
left: -20px;
}
#content {
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="parent">
<div id="background"></div>
<div id="content"></div>
【讨论】：
right: -20px 是#background 而不是left: -20px？
top: -20px; left: 0px;，因为列出的第一个值是垂直位置，第二个是水平位置。
还有另一种方法可以在不更改标记的情况下实现此目的：
使用 :after 伪选择器，您可以将图像添加到任何块的右侧，尽管与实际的 css 背景不同
所以你可以这样做：
#element {
position: relative;
}
#element:after{
content: "";
background: transparent url(image.png) 0 0 no-repeat;
position: absolute;
right: -20px;
top: 0;
height: 50px /*add height of your image here*/
width: 50px /*add width of your image here*/
z-index: 1;
}
#element *{
position: relative;
z-index: 2; /*this makes sure all the "background image" doesn't sit above the elements*/
}
【讨论】：
content: url(...); display:block;），因为它不需要指定width 和height。