0

I wanted to know is it possible to have two background patterns for a wrapper div. For example - 

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

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

Is it possible to have this pattern.png repeat only till 50% of the div and have another pattren like pattren_flipped.png for another 50%? Is it possible to do it without having another two divs inside?

4

2 回答 2

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%;
}

小提琴

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

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

不幸的是，这仅适用于IE8+，因此如果您需要与旧版本的 IE 兼容，您可能会遇到一些问题，除了上述之外，我认为没有另一种（大部分）跨浏览器方式可以做到这一点

于 2013-04-23T09:03:10.717 回答
2

如果重复，您不能强制图案仅填充 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/

于 2013-04-23T08:58:38.820 回答