0

ラッパー div に 2 つの背景パターンを使用できるかどうかを知りたいと思いました。例えば ​​-

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

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

これpattern.pngを div の 50% までだけ繰り返して、別のパターンpattren_flipped.pngを別の 50% にすることは可能ですか? 内部に別の2つのdivを持たずにそれを行うことは可能ですか?

4

2 に答える 2

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 に答える