css - 具有 CSS 定位的多个背景

Question

我将如何制作这种背景：我有一个 150px x 150px 的图像，我想在整个背景中重复。但是最上面一行（顶部 150 像素）不同的图像应该只在 x 轴上重复。同样在底部，第三个图像的底线应该在 x 轴上重复。我该怎么做？谢谢！

Answer 1

试试这个！

body {
    bacground: url(topbackground.png) repeat-x, 
               url(bottombackground.png) bottom fixed repeat-x,
               url(centerbackground.png);
}

另外，这里是一个带有一堆小猫图片的示例的链接！

http://jsfiddle.net/7Rt99/

Answer 2

您可以为此创建 3 个不同的 div，以便您可以在单独的部分中重复每个背景。

<div class="two" id="one">
</div>
<div class="two" id="one">
</div>
<div class="two" id="one">
</div>


#one{
background-image:url('http://www.shrtclothing.com/images/share/facebookthumb.jpeg');
    background-image:repeat;
width:1000px;
height:150px;
}

http://jsfiddle.net/hVvdL/