5

我知道我可以像这样在背景图像上设置负左位置:

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

这会将背景图像定位在 的左边缘左侧 20 像素处#element,而与#element的宽度无关。

但是有没有办法设置一个负的位置,而不给出#element一个固定的宽度(然后只设置一个高的正左值)?

4

3 回答 3

15

这种效果不可能通过简单的 CSS 获得,这根本不是真的。无需使用不必要的伪元素或多个 div 使您的标记复杂化。

您可以使用 CSS 中的“calc”函数让浏览器计算 100% 的容器宽度,然后像这样添加负边距(记住将负边距添加到 100%而不是减去它):

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/

大多数主流浏览器都支持“计算”功能,但在某些情况下缺乏对 IE9< 的支持。您可以在http://caniuse.com/#feat=calc阅读更多关于哪些浏览器支持此功能的信息。

于 2015-07-24T00:43:50.090 回答
2

你想做的事情不可能以你想做的方式。

解决方法可能是创建一个具有position: relative;属性的父 div,然后对另一个 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>
于 2013-01-28T20:09:20.547 回答
1

还有另一种方法可以在不更改标记的情况下实现此目的:

使用 :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*/  
}
于 2014-08-01T04:49:36.107 回答