html - 左侧重复的纹理和右侧重复的纹理

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

:before 和 :after 是一个很好的解决方案，但您始终可以使用 CSS3 查看多个背景。显然，支持也有一些限制:> IE8，但这也可以解决问题。

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