Question

我有一个有序列表，我正在尝试为它的背景制作斑马条纹。我正在使用重复的线性渐变作为背景，但我一直遇到一个非常奇怪的铬错误。列表越长，条纹就越模糊;它可以在少于约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;
}

Webkit错误与重复y背景

1 个答案: