我如何创建一个重复的线性背景细条纹效果

Question

我已经试过了，但它没有给我想要的效果。

  background: repeating-linear-gradient( 0, #222, #111 5px, #333 1px);

我想要的是设置背景色为#222，然后每隔5px我想要一个1px高的水平线，颜色为#333。我一直在尝试不同的组合，但我不能让它工作。注意，这只是必需的适用于现代IE9+浏览器。

Answer 1

这可能是最简单的方法。

 body {
   height: 100%;
   width: 100%;
   background-color: #fff;
   background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #f00 5px, transparent 5px);
 }

Answer 2

你读过关于repeat -linear-gradient的文档了吗?

如果你尝试他们给出的例子，你会得到一些很好的工作…请到这个链接阅读:

https://developer.mozilla.org/fr/docs/Web/CSS/repeating-linear-gradient

下面是他们的例子:

background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);

去这把小提琴，似乎它工作得很好…

http://jsfiddle.net/2o3ehav1/4/

编辑:垂直与你的颜色:http://jsfiddle.net/2o3ehav1/19/

(试着编辑你的"像素大小")

希望有帮助!div;)

类似的东西?

background: repeating-linear-gradient(0, transparent, transparent 4px, #333 5px, transparent 5px);
background-color: #222;