div上的CSS背景条纹 [英] CSS Background Stripes on div

问题描述

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

So I have a square div and i'm trying to get the background to basically look like this :

我已经四处看看，并且由于这个问题被问了很多，所以我已经看到了CSS渐变.

I've had a look around, and since this question has been asked a lot i've seen CSS gradients used.

我一直在玩，最后得到:

I've been playing about and ended up with:

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

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

However, gradients seem to blend the colours from one to another instead of having a sharp difference like below.

我应该怎么做才能达到目的?

What should I be doing to achieve the picture?

推荐答案

尝试一下:

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

这篇关于div上的CSS背景条纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！