Question

有没有办法只重复div的背景部分。我希望有一个背景重复y表示div的90％，然后底部有不同的背景。现在我有两个背景，但由于底部有一个渐变来清除它被它上面的重复y背景“掩盖”。

Answer 1

我想说最简单的方法是在当前的内部创建一个额外的<div>。将<div>的高度设置为90％，然后将背景分配给<div>内的。

e.g。

HTML

<div id="outer-div">
    <div id="inner-div">...content...</div>
</div>

CSS

/* example outer div */
#outer-div
{
    height:500px; /* This is an example rule */
    width: 200px; /* This is an example rule */
}

#inner-div
{
    height:90%;
    background:#000;
}

Answer 2

可以使用CSS3仅使用一个div创建多个背景：

background: 
   url(bottom.png) no-repeat,     /* On top,    like z-index: 2; */
   url(top.png) repeat-y,         /*            like z-index: 1; */

重复您的顶部图像，然后底部图像将显示在此图像上。

css重复部分方式

2 个答案: