Question

我知道我可以在背景图像上设置负左侧位置，如下所示：

#element {
    background: url(image.png) -20px 0 no-repeat;
}

无论#element的宽度如何，都会将背景图片20px定位在#element左边缘的左侧。

但有没有办法设置负右位置，没有给#element一个固定宽度（然后只设置一个高正左值）？

Answer 1

通过简单的CSS无法获得这种效果，这是不正确的。没有必要使用不必要的伪元素或多个div使标记复杂化。

您可以使用＆＃34; calc＆＃34; CSS中的函数使浏览器计算容器宽度的100％，然后将负边距添加到那样（请记住将负边距添加到100％而不是减去它）：

background: url("image.png") calc(100% + 20px) 0 no-repeat;

或者如果您更喜欢用短手格式标记：

{{1}}

这将使背景图像100％（从而获得与使用 background-position：right 相同的效果）从容器的左侧放置，并通过向其添加20px，您将获得负的右边距。

您可以在此jsFiddle中看到该函数的行为演示：http://jsfiddle.net/58u665fe/

＆＃34; calc＆＃34;大多数主流浏览器都支持该功能，但支持IE9＆lt;在某些情况下缺乏。您可以在http://caniuse.com/#feat=calc上详细了解哪些浏览器支持此功能。

Answer 2

您想要做的事情不可能以您想要的方式进行。

修复可能是创建一个具有position: relative;属性的父div，然后z-index另一个div，其中包含一个包含您内容的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>

Answer 3

有另一种方法可以在不改变标记的情况下实现这一目标：

使用：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*/  
}

CSS负面右背景位置

3 个答案: