Question

我想知道是否可以为包装div设置两种背景模式。例如 -

<div id="wrapper">
Hello
</div>

#wrapper {
  background:url(../images/pattren.png) repeat-x; 
}

是否有可能让这个pattern.png只重复到div的50％并且另有50％的pattren_flipped.png之类的另一个pattren？是否有可能在没有另外两个div的情况下做到这一点？

Answer 1

如果重复，您不能强制图案填充50％的宽度或高度。但也许你可以使用before和after伪选择器来模拟这种行为：

#wrapper:before, #wrapper:after {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    content: '';
    z-index: -1;
}
#wrapper:before {
    left: 0;
    background: url(pattern1.png) repeat-x 0 0;
}
#wrapper:after {
    right: 0;
    background: url(pattern2.png) repeat-x 0 0;
}

http://jsfiddle.net/dfsq/PwSD4/

Answer 2

你可以这样做：

HTML：

<div id="wrapper">
    <div class="inner">
        Hello
    </div>
</div>

CSS：

#wrapper { height: 800px; position: relative; width: 500px; z-index: 2; }
.inner { position: relative; z-index: 2; }

#wrapper:before {
    background:url("http://css-tricks.com/images/Treehouse_600x500_02.jpg") repeat-x;
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 0;
    left: 0;
}
#wrapper:after{
    background:url("http://css-tricks.com/images/ads/wufoo-600x600-red.png") repeat-x;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
}

Fiddle

理想情况下，内部div不是必需的，它可能不是，但如果没有它，我无法在背景图像上方的包装内获取文本

编辑：内部div根本没有必要，看看dfsq的答案（不敢相信我没想到！）

不幸的是，这只会在IE8+中起作用，所以如果你需要与旧版本的IE兼容，你可能会遇到一些问题，除了上面我不认为还有另一种（主要是）交叉浏览器方式这样做

包装div的两个背景图案

2 个答案: