div 上的 CSS 背景条纹

Question

所以我有一个方形 div，我试图让背景基本上看起来像这样：

我环顾四周，因为这个问题被问了很多，所以我看到了 CSS 渐变的使用。

我一直在玩，结果是：

 background-image: linear-gradient(
  180deg, rgba(255, 255, 255, .2) 29%,
  transparent 20%,
  transparent 51%,
  rgba(255, 255, 255, .2) 50%,
  rgba(255, 255, 255, .2) 75%,
  transparent 75%,
  transparent);

然而，渐变似乎将颜色从一种混合到另一种，而不是像下面那样有明显的差异。

我应该怎么做才能实现这一目标？

原文由 pourmesomecode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个 ：

 div#stripes {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, #fff);
  background-size: 50px 50px;
}

 <div id="stripes">

</div>

小提琴手

原文由 Mihai T 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以这样做：

 background: repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);

小提琴

原文由 Advaith 发布，翻译遵循 CC BY-SA 3.0 许可协议