css - 如何在 CSS 中制作部分透明的棋盘格？

Question

我现在正在使用 css 渐变棋盘，但我很难弄清楚它的实际工作原理以及如何将其修改为大部分透明（比如 60%）。

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

<div class="checkered"></div>

如何修改此代码段以控制生成的棋盘格的透明度？

Answer 1

有两种主要方式（第一种更被接受）：

1. 使用rgba()而不是十六进制。

RGBA 代表红、绿、蓝、阿尔法（其中“阿尔法”是透明度）。

.checkered {
  background-image: linear-gradient(45deg, rgba(0,0,0,.6) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0,.6) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0,.6) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.6) 70%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

- - 或者 - -

2. 在十六进制末尾添加 alpha 值：#808080AA（0-F 就像十六进制颜色一样。0 = 完全透明，F = 完全不透明）

[警告：据我所知，在 IE 中不起作用，也许在其他一些浏览器中不起作用]