当有其他背景图像时，具有重复的背景图像必须停止

Question

我网站的内容 div 具有独特的背景和各种图层样式。在 HTML/CSS 中，我可以从 photoshop 中获取背景并将其用作背景图像。 我的问题是内容 div 的高度是可变的。为了解决这个问题，我将顶部像素设置在顶部，中心的一个像素行有一个重复 y 和底部像素，并将它们放在底部。这可行，但中间背景图像必须在顶部背景图像之后和底部背景图像之前开始。

div#content{
    background: url('contentbghead.png') top center no-repeat, 
                url('contentbgfoot.png') bottom center no-repeat, 
                url('contentbgmid.png') 0px 10px repeat-y;
    width:680px;
    height:300px;
}

我的结果可以在这里找到：http://tinypic.com?ref=30muazs

Answer 1

CSS2 不支持多背景。你需要多个 div 来实现你想要的。

您还可以在以下位置查看一些适用于多种背景的 CSS3 方法：

Multiple Backgrounds with CSS3

但是，该方法不适用于 IE9 之前的 IE 版本。

Answer 2

仅使用多个背景是不可能的，因为每个背景条目与另一个背景条目没有关系。但是，您可以使用伪元素来实现此效果：

div#content{
    position:relative;
    background: url('contentbghead.png') top center no-repeat, 
                url('contentbgfoot.png') bottom center no-repeat;
    width:680px;
    height:300px;
}
div#content:before {
    content:"\0020"; font-size:0px;
    display:block; position:absolute; top:10px; left:0px; bottom:10px;
    width: /* Whatever your BG's width is */;
    background:transparent url('contentbgmid.png') repeat-y left top;
    pointer-events:none;
}

您需要注意 z-index 分层，因为如果伪元素位于您的内容之上（对于不支持指针事件的浏览器），它可能会捕获点击事件。

Answer 3

您好，您可以使用 :before 和 :after CSS 伪元素 来实现您的结果。

我制作了一个只有一个 div 的代码，并在一个 div 中使用了所有三个图像，中间图像也可以在 y 轴上重复。

注意 :before 和 :after *伪元素* 支持到 IE-8

HTML

<div id="content">
Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content
</div>

CSS

    #content:after {
    background: url("http://i.imgur.com/5agws.png") no-repeat 0 0;
    content: " ";
    height: 50px;
    left: 0;
    position: absolute;
    width: 680px;
}

#content:before {
    background: url("http://i.imgur.com/P7jL5.png") no-repeat 0 0;
    content: " ";
    height: 50px;
    position: absolute;
    top: -50px;
    width: 680px;
}

#content {
    background: url("http://i.imgur.com/vAqRU.png") repeat-y 0 0;
    color: white;
    position: relative;
    top: 50px;
    width: 680px;
    white-space: pre-wrap;

}

查看演示以获得更好的理解：- http://jsfiddle.net/5Lkmr/40/