css - 创建小方 block 的 css 背景图案并控制不透明度

Question

如何在 css 中复制此图像作为文本背景？

(有点难看，但它们是独立的方 block ，而不是点。)

正方形也应该是透明的。

也可以对其进行编码以控制 css 中每条水平方 block 的不透明度吗？

Answer 1

1.这是一种使用伪元素的方法，根据您的喜好调整值:

片段:

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

.checkered-bg {
  width: 100%;
  height: 100%;
  color: white;
}

.checkered-bg::before, .checkered-bg::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.checkered-bg::before {
  background-image:
    linear-gradient(black 50%, transparent 50%),
    linear-gradient(to right, grey 50%, black 50%);
  background-size: 20px 20px;
}

.checkered-bg::after {
  background-image: linear-gradient(black, transparent);
}

<div class="checkered-bg">CONTENT</div>

查看JSfiddle .

2. 另一种制作正方形并使其周围区域透明的方法。但是为了让最上面的行更加半透明，你需要一种纯色:

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

.checkered-bg {
  width: 100%;
  height: 100%;
  color: black;
}

.checkered-bg::before, .checkered-bg::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.checkered-bg::before {
  background-image:
    linear-gradient(45deg, #808080 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #808080 75%);
  
  background-size:20px 20px;
  background-position:0 0, -10px -10px;
}


.checkered-bg::after {
  background-image: linear-gradient(#808080, transparent);
}

<div class="checkered-bg">CONTENT</div>

查看JSfiddle

选项 #2 较小的方 block - JSfiddle