乐趣区

关于前端:CSS-实现透明方格的-3-种方式

jiezi

常常用 photoshop 的同学对这样一个通明方格的背景再相熟不过了，也有的叫做“棋盘”成果，如下

实现这种成果肯定离不开突变，本文介绍 3 种 CSS 绘制通明方格的小技巧

一、linear-gradient

linear-gradient能够说是最早实现这种成果的利用了，当然实现也最为奇妙，也最为简单。原理是绘制两个直角三角形，而后拼接而成，如下

最小拼接单元其实是一个这样的图形，45deg 方向上的一个突变

为了便于察看，上面所有演示的色彩和尺寸都做了非凡解决，下同

.bg{background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%)
}

平铺开来就是这样

而后再绘制另一份一样的，错位拼接

上面用一张动图来残缺体现实现过程

上面是残缺代码

.bg{
    width: 400px;
    height: 300px;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

二、repeating-linear-gradient

repeating-linear-gradient也能实现“棋盘”成果，而且相比而言更容易了解一些，然而须要一点额定的小技巧

首先绘制一个程度条纹图案

.bg{background-image: repeating-linear-gradient(#eee 0 8px, transparent 0 16px)
}

而后绘制一个垂直方向上的条纹

.bg{background-image: repeating-linear-gradient(#eee 0 8px, transparent 0 16px), repeating-linear-gradient(90deg, #eee 0 8px, transparent 0 16px)
}

如果是灰色，看起来就是这样的

条纹交织的中央是重叠的，像这种状况能够思考加上背景混合模式（对于混合模式，能够参考张鑫旭老师的这篇文章：深刻了解 CSS mix-blend-mode 滤色 screen 混合模式），这里应用的是“滤色（screen）”，能够过滤掉彩色局部，如果是一个浅灰色，剩下的色彩就近乎是“红色”了。如下所示，“棋盘”成果就进去了

.bg{background-blend-mode: screen;}

上面用一张动图来残缺体现实现过程

上面是残缺代码

.bg{
    width: 400px;
    height: 300px;
    background-image: repeating-linear-gradient(#eee 0 8px, transparent 0 16px), repeating-linear-gradient(90deg, #eee 0 8px, transparent 0 16px);
      background-blend-mode: screen;
}

而且，这种形式能够实现任意倾角的成果，例如

不过，混合模式的局限性也很多，目前在这种浅灰色看起来没什么问题，换一种色彩可能就不行了，例如这样的

这就须要依据理论状况酌情应用了

三、conc-gradient

conc-gradient锥形突变能够算的上是官网的解决方案了（MDN 上就有这个棋盘案例），不过兼容性稍微差点

上面用一张动图来残缺体现实现过程

上面是残缺代码

.bg{
    width: 400px;
    height: 300px;
    background-image: conic-gradient(#eee 0 25%, transparent 0 50%, #eee 0 75%, transparent 0);
      background-size: 16px 16px;
}

其实还能够用 repeating-conic-gradient 优化一下（原理是一样的，所以归为同一种办法），前面两个色彩是后面两个反复而来，所以能够只用两个色彩实现

.bg{
    width: 400px;
    height: 300px;
    background-image: repeating-conic-gradient(#eee 0 25%, transparent 0 50%);
      background-size: 16px 16px;
}

这应该算的上是纯 CSS 计划中最精简的了

四、实际上可能并不会用这些

尽管 CSS 突变能够奇妙的实现这些图案，但平时工作中可能不会这么做，间接切图就好了，比方间接在 Figma 中绘制一个这样的 SVG

而后间接用这张图就好了

.bg{
    width: 400px;
    height: 300px;
    background-image: url('xxx.svg');
      background-size: 16px 16px;
}

10 秒不到就实现了这样的“棋盘”成果，简略快捷，没有兼容性问题。

是不是 CSS 突变就是鸡肋？

当然不是！CSS 突变绘制出的是动静的，你能够动静调整色彩、尺寸、或者形态，这些都不是动态图片可能实现的。比方这样的，恐怕就须要存多份图片了，但对于突变来说，改一个色彩值就行

.bg{
    width: 400px;
    height: 300px;
    background-image: repeating-conic-gradient(var(--color) 0 25%, transparent 0 50%);
      background-size: 16px 16px;
}
.bg1{--color1: gray;}
.bg2{--color1: yellow;}
.bg1{--color1: blue;}

更为重要的一点是，学习把握突变对晋升本身 CSS 程度有十分大的帮忙。不过，也须要依据理论状况，如果不须要动静扭转一些款式的话，SVG 图片也是一种好办法，但肯定不要进行思考🤔。

退出移动版