Question

我将如何制作这种背景：我有一个150px x 150px的图像，我想在整个背景中重复一遍。但最顶部的线（顶部150px）不同的图像应该只在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/

CSS定位的多个背景

2 个答案: