html - 重复单个 CSS 对象

Question

我想用纯 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 条纹会更容易，但我想知道是否可以在<span>不使用 a或<div>类似的多个实例的情况下使用纯 CSS 制作：

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

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

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

Answer 1

如果您不介意放弃对旧浏览器的支持，您可以使用:nth-child()：

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

MDN 文档

Answer 2

我认为这个线程是你正在寻找的，特别是这样的东西。这是用于制作图案的 css3 渐变。基本上，您为背景创建一个图案，然后让该图案重复。但是，较旧的浏览器将无法使用，但我不知道这是否是一个问题。

Answer 3

试试这个：

span:nth-child(2n+1) /* represents every odd-numbered child of its parent */
span:nth-child(odd)  /* same */