0

我网站的内容 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

4

3 回答 3

3

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

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

使用 CSS3 的多个背景

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

于 2012-04-23T20:44:10.140 回答
0

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

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 分层，因为如果伪元素位于您的内容之上（对于不支持指针事件的浏览器），它可能会捕获点击事件。

于 2012-04-23T22:22:00.073 回答
0

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

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

注意 :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/

于 2012-04-24T07:43:04.607 回答