Question

我试过这个，但它没有给我想要的效果。

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

我想要的是让背景为＃222，然后每5px进入页面，我想要一个1px高度的水平线，＃333颜色。我一直在尝试不同的组合，但我无法让它发挥作用。请注意，这只是需要的适用于现代IE9 +浏览器。

Answer 1

这样的事情可能是最简单的方法。

＆＃13;

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

＆＃13;

Answer 2

您是否阅读过有关重复线性渐变的文档？

如果你尝试他们提供的例子，你会得到一些正常的东西......只需转到此链接并阅读：

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/

（只是尝试编辑“像素大小”）

希望它有所帮助！ ;）

Answer 3

类似的东西？

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

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

3 个答案: