一个重复左边，另一个纹理在右侧重复(A texture that repeats on the le

我不知道如何做到这一点，但我想有2层重复的纹理，一个重复在左边，一个在右边。

代替：

#header {
   background-image : Url('My_Two_Textures_Combined.png');
   background-repeat : repeat-x; /*Which repeats my joined textures a long the x axis*/
}

我想要：

#header {
   background-image : Url('My_Left_Texture');
   background-repeat : repeat-x-left; /*Which would ideally repeat my texture to the left on the x axis*/
   background-image : Url('My_Right_Texture');
   background-repeat : repeat-x-Right; /*Which would ideally repeat my texture to the right on the x axis*/
}

我希望有一种方法可以做到这一点，因为我认为它会很好看在我的网站。 我会尝试寻找其他方式来做到这一点，像伪指令或东西。 如果我发现任何东西，我将它张贴在这里！

Answer 1:

你可以使用CSS选择器一样:before和:after ，并把你的背景之一#header:before {}一个在#header:after {}

Answer 2:

：before和：after是一个很好的解决方案，但你总是可以看看与CSS3多背景。 很显然，支持也是一点点有限的：> IE8，但是这会做的伎俩了。

background-image: url(left.png), url(right.png);
background-position: left bottom, right bottom;
background-repeat: no-repeat;

Answer 3:

并排撰写两个div侧的头。 每一个都有自己的纹理。

Answer 4:

你可以做这样的： http://jsfiddle.net/9V2vE/9/ （更换背景颜色与图片）

文章来源: A texture that repeats on the left and another that repeats on the right