html - 在单个 div 中使用两个重复的背景图像

Question

我尝试为我的 div 使用 x 方向上的两个重复背景图像。但我不能。如何在我的 div 中使用 x 方向上的两个重复图像（即，我需要将我的单个 div 分成两个相等的部分。对于我的第一部分我需要使用我的第一张图片和背景重复-x，然后其余部分应该用我在重复-x方向的第二张图片填充）。请帮助我

Answer 1

如果没有您的代码，您将无法真正知道您的目标，但我会这样做：

<div class="outer_div">
    <div class="left_half"></div>
    <div class="right_half"></div>
</div>

<style>
.outer_div{
    width: 500px; /*or whatever you need the width to be */
}
.left_half{
    background-image: url("your image here") repeat-x;
    width: 50%;
    float:left;
}
.right_half{
    background-image:url("your image here") repeat-x;
    width: 50%;
    float:right;
}
</style>

Answer 2

您将需要CSS3为单个. div

HTML：

<div class="backgrounds"></div>

CSS：

.backgrounds {
  background: url(http://userlogos.org/files/logos/pek/stackoverflow2.png),
              url(http://www.gravatar.com/avatar/3807b3e7ad69d363d4490540c663af5f?s=128&d=identicon&r=PG);
  background-repeat: no-repeat, repeat;
  background-position: center, left;
  width: 700px;
  height: 300px;
}

jsFiddle 演示：单个 Div 的多个背景

编辑：修订 jsFiddle 以repeat-x阅读更多关于CSS3多背景的 信息。