css - css重复部分方式

Question

有没有办法只在 div 中重复背景部分。我想为 90% 的 div 设置一个背景重复，然后为底部设置不同的背景。现在我有两个背景，但由于底部有一个渐变来清除它，它被上面的重复-y背景“覆盖”了。

Answer 1

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

例如

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; */

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