css - css 途中で繰り返す

Question

div の途中で背景部分のみを繰り返す方法はありますか。たとえば、div の 90% に対して 1 つの背景を繰り返してから、下部に別の背景を設定したいと考えています。現在、両方の背景がありますが、下の背景にはクリアするグラデーションがあるため、その上の繰り返しの背景によって「覆われています」。

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

1 つの div のみを使用して、CSS3 で複数の背景を作成することが可能です。

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

上の画像を繰り返すと、下の画像がその上に表示されます。