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

我试过这个，但没有达到我想要的效果

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

我想要的是背景是#222，然后每5px沿着页面向下，我想要一条1px高的水平线，即#333色。我一直在尝试不同的组合，但我无法让它工作。注意这只是需要的

---

适用于现代IE9+浏览器

你读过关于重复线性梯度的文档吗

如果你尝试他们给出的例子，你会得到一些很好的结果。。。只需转到此链接并阅读：

以下是他们的例子：

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

到这把小提琴那儿去，好像很好用

编辑：与您的颜色垂直：

（只需编辑“像素大小”）

---

希望能有帮助！；）

你读过关于重复线性梯度的文档吗

如果你尝试他们给出的例子，你会得到一些很好的结果。。。只需转到此链接并阅读：

以下是他们的例子：

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

到这把小提琴那儿去，好像很好用

编辑：与您的颜色垂直：

（只需编辑“像素大小”）

---

希望能有帮助！；）

类似的方法可能是最简单的方法

正文{
身高：100%；
宽度：100%；
背景色：#fff；
背景图像：重复线性渐变（至底部，透明，透明4px，#f00 5px，透明5px）；
}

类似的方法可能是最简单的方法

正文{
身高：100%；
宽度：100%；
背景色：#fff；
背景图像：重复线性渐变（至底部，透明，透明4px，#f00 5px，透明5px）；
}

类似的东西

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

---

类似的东西

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

---

试试这个：

重复线性渐变（到底部，#333，#222 5px）

重复线性渐变（0，#222，#222 5px，#333 5px，#333 6px）应该适合您；）谢谢你的评论。如果你不介意的话，你能解释一下他们是如何产生1px高度线的吗。我发现参数的方式有点混乱。提前非常感谢。请尝试以下操作：

重复线性渐变（到底部，#333，#222 5px）

重复线性渐变（0，#222，#222 5px，#333 5px，#333 6px）应该适合您；）谢谢你的评论。如果你不介意的话，你能解释一下他们是如何产生1px高度线的吗。我发现参数的方式有点混乱。事先非常感谢。