纯css实现透明格子背景

图片编辑器的透明背景一般由灰白相间的网格来表示，不想使用图片，可以选择使用 css 实现

先来看看最终效果

实现

利用 background 的 linear-gradient 实现正方形两个角上色，再通过 background-position 使得两个图错位叠加即可：

 .block {
            width: 300px;
            height: 300px;
            background-image: 
                linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%), 
                linear-gradient(45deg,rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%);
            background-position: 0 0, 5px 5px;
            border:1px solid #000;
            background-size: 10px 10px;
        }

解析

background-image 有两个值一样的值 linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%)，将其直接画出来如图：

background-repeat 的值默认为 repeat ，所以，对两张图进行错位叠加（示意图如下），可以模拟出格子纹理。