html - 具有重复 y 背景的 Webkit 错误

Question

我有一个有序列表，我正在尝试为其背景制作斑马条纹。我在背景中使用了重复的线性渐变，但我在 Chrome 中不断遇到一个非常奇怪的错误。列表越长，条纹就越模糊；当元素少于 50 件时它可以使用，但之后就会变得太模糊而无法识别。当少于 10 个元素时，它真的很脆。

html:

<ul class="test">
   <li class="subtest">foo</li>
   <li class="subtest">bar</li>
   <li class="subtest">baz</li>
   <li class="subtest">foo</li>
   <li class="subtest">bar</li>
   <li class="subtest">baz</li>
   etc...
</ul>

CSS:

.test{

        background-image: repeating-linear-gradient(
              180deg,
              #ffffff 0px,
              #ffffff 50px,
              #f5f5f5 50px,
              #f5f5f5 100px);
}
.subtest{
    height:50px;
}

jsfiddle 例如:http://jsfiddle.net/yLLF2/

从列表中删除一些元素以查看其外观。

我最初是通过直接使用 :nth-of-type(2n) 设置元素样式来实现它的，但用户可以动态隐藏/显示元素，这会破坏该实现。

该错误仅出现在 Chrome 中。有没有什么办法解决这一问题？谷歌搜索我一无所获。

Answer 1

您没有说明背景的大小。应该是:

.test {
    background-image: repeating-linear-gradient(
          180deg,
          #ffffff 0px,
          #ffffff 50px,
          #f5f5f5 50px,
          #f5f5f5 100px);
    background-size: 100% 100px;
}