一个在左侧重复的纹理，另一个在右侧重复的纹理答案

【问题标题】：A texture that repeats on the left and another that repeats on the right一个在左侧重复的纹理，另一个在右侧重复的纹理
【发布时间】：2012-10-03 15:29:47
【问题描述】：

我不知道该怎么做，但我想要 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*/
}

我希望有办法做到这一点，因为我认为它在我的网站上看起来不错。我会尝试寻找其他方法来做到这一点，比如使用伪命令或其他东西。如果我找到任何东西，我会在这里发布！

【问题讨论】：

标签： html css background-image repeat

【解决方案1】：

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

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

【讨论】：

很好地使用了 CSS3！我自己不知道 CSS3 支持多种背景。酷。
嗨，卡尔！我喜欢这样的声音，会尝试 :) 干杯！
嘿，Carl 你的也可以！但是我如何正确标记 2 个问题呢？
太棒了！据我所知，您不能只将您喜欢的任何方法标记为正确答案。
@MithosAnnar。如果您认为另一个更合适，您可以更改正确答案。标记更正您认为最能回答问题的那一项。请记住，未来的访客并不关心谁先回答。他们想要最好的解决方案。

【解决方案2】：

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

【讨论】：

正是我的想法:)。
+1。 :before 和 :after 可以很好地工作，但我喜欢使用 2 个 div 的简单性。
这正是我会做的，但它有点笨拙，不是吗？ CSS3 解决方案非常简洁。
嗨，弗莱姆，这是怎么重复的？
@MithosAnnar。刚刚启用了 repeat-x。

【解决方案3】：

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

【讨论】：

所以你的意思是，我可以让一个重复一个 x，然后一个重复 x，但是在第一个重复之后？但是我只会有一种纹理。最后渲染的那个，对吧？
你至少有好奇心去google一下 :before 和 :after 是什么意思吗？
很抱歉我问了这么简单的问题。
你说得对，看来我可以只使用伪命令。我会确保在 6 分钟内正确标记这个问题，以供其他想知道这一点的人使用。
下次我会用谷歌搜索 :) 我知道你不是傻瓜，如果你被冒犯了，我很抱歉，我无意冒犯，非常感谢 Caelea！你帮了大忙！ :)

【解决方案4】：

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

【讨论】：

您好，感谢您的帮助！那绝对是在正确的轨道上！我只需要他们重复:)
如果对您有帮助，请按复选框：p。好吧，您应该将“背景颜色”替换为： background-image:url("path/of/image/image.png");背景重复：重复-x； //重复-y; //重复;很高兴我能帮忙:)