2

純粋なCSSでシマウマのようなパターンを作りたいです。動作しているものには、繰り返しを生成するためのスパンの複数のインスタンスがあります。これがコードです。

<div id="wrap">    
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
 <span class="five"></span>
</div>

x-repeatingストライプを使用するとこれが簡単になることはわかっていますが、aなどの複数のインスタンスを使用せずに純粋なCSSで作成できるかどうかを知りたいです。<span><div>

<div id="wrap">    
 <span></span>
</div>

#wrap span {
 background: #000;
 /* stripe shape coordinates */

 repeat: x-repeat; /* something like this */
}
4

3 に答える 3

1

古いブラウザのサポートをやめても構わない場合は、次を使用できます:nth-child()。

#wrap span:nth-child(odd) {background-color:#000}

MDN ドキュメント

于 2012-11-05T08:41:05.500 に答える
1

このスレッドはあなたが探しているもので、特にこのようなものだと思います。パターンを作成するために使用される css3 グラデーションです。基本的に、背景のパターンを作成し、そのパターンを繰り返します。ただし、古いブラウザは動作しませんが、それが問題かどうかはわかりません。

于 2012-11-05T08:43:43.457 に答える
0

これを試してください：

span:nth-child(2n+1) /* represents every odd-numbered child of its parent */
span:nth-child(odd)  /* same */
于 2012-11-05T08:42:51.860 に答える