Question

我不知道怎么做，但我希望有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

：之前和之后是一个很好的解决方案，但你可以随时看看CSS3的多个背景。显然，支持也有一点限制：＆gt; IE8，但这也可以解决问题。

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

Answer 2

并排编写两个div的标题。每个都有自己的纹理。

Answer 3

您可以使用:before和:after等css选择器，并将其中一个背景放在#header:before {}中，将一个放在#header:after {}中。

Answer 4

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

在左侧重复的纹理和在右侧重复的纹理

4 个答案: