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);

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

我应该怎么做才能实现这幅画面？

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>

的jsfiddle

Answer 2

你可以这样做:

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

的jsfiddle

Answer 3

在这里找到了一个更灵活和优雅的解决方案：https : //css-tricks.com/stripes-css/

#stripes {
  height: 200px;
  width: 2000px;
  background-color:yellow;
}

.stripes {
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      #000 10px,
      #000 20px
  );
}

<div id="stripes" class="stripes"></div>

https://jsfiddle.net/ns8rn7r3/4/