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

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;