Html div上的CSS背景条纹

所以我有一个正方形的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);

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

我应该做些什么来实现这张图片？

试试这个：

div#条纹{
高度：200px；
宽度：200px；
背景图像：线性梯度（45度，#000 25%，透明25%，透明50%，#000 50%，#000 75%，透明75%，#fff）；
背景尺寸：50px 50px；
}

请使用此CSS：

body{
  background: linear-gradient(45deg, white 25%, #000 25%, #000 50%, white 50%, white 75%, #000 75%);
  background-size:98px 98.9px;
}

请参见中的，您可以这样做：

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

---

这里有一个更灵活、更优雅的解决方案：

#条纹{
高度：200px；
宽度：2000px；
背景颜色：黄色；
}
.条纹{
背景：重复线性渐变(
45度，
透明,，
透明10px，
#000 10像素，
#000 20像素
);
}

---

有很多方法可以做到这一点-这是一个开始-谷歌是你的朋友，如果你使用它的话-这张图片是催眠（但是渐变应该是混合在一起的。它们不会有帮助的。@DarrenSweeney哦哇。我不敢相信我错过了。我环顾四周，找到了几乎所有使用css渐变的示例，但一旦我开始使用它们，我发现条纹混合的更多，而不是实际的条纹。我现在将阅读该链接！）可能重复的