出于好奇，我get了一个新的CSS知识

大家在查阅Element UI文档的时候，是否发现下面这个效果👇

好家伙，这个效果该怎么实现呢？我的思路是设置背景图为白色和透明相间，这样底下的图片就能穿透部分上来，形成一个类似毛玻璃的效果。话不多说，咱们一起来写代码试试能否实现：

背景如何镂空

.header {position: fixed;top: 0;width: 100%;height: 400px;background-image: radial-gradient(transparent 50px, #fff 50px);background-size: 200px 200px;background-color: yellow;
} 

.header {position: fixed;top: 0;width: 100%;height: 400px;background-image: radial-gradient(transparent 50px, #fff 50px);background-size: 200px 200px;background-color: yellow;
+ background-repeat: no-repeat;
} 

懂了吧？就是一个这种的小方块平铺形成的。假如我们的背景色不设置，那么这就是一个镂空的背景。

如何设置背景尺寸合适

我们可以看到我们的小圆孔是很均匀排列开的，假如我改一下背景的尺寸，效果如下：

.header {position: fixed;top: 0;width: 100%;height: 400px;background-image: radial-gradient(transparent 50px, #fff 50px);background-size: 120px 120px;background-color: yellow;/* background-repeat: no-repeat; */
} 

.header {position: fixed;top: 0;width: 100%;height: 400px;background-image: radial-gradient(transparent 50px, #fff 50px);background-size: 71px 71px;background-color: yellow;/* background-repeat: no-repeat; */
} 

这个蒙板还不错

我们现在要对标Element 官网那样的效果，我做了下面的例子：

.header {position: fixed;top: 0;width: 100%;height: 400px;background-image: radial-gradient(transparent 10px, #fff 10px);background-size: 40px 40px;
}

.container {padding-top: 400px;height: 200vh;
}

.circle {width: 100%;height: 200px;border-radius: 25px;background-color: red;
} 

修改下尺寸：

background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px; 

Element 是怎么做的

.navbar-wrapper {position: relative;border-bottom: 1px solid var(--border-color);height: var(--header-height);padding: 0 12px 0 24px;background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);background-size: 4px 4px;backdrop-filter: saturate(50%) blur(4px);-webkit-backdrop-filter: saturate(50%) blur(4px);top: 0;
} 

欧？backdrop-filter这个是什么，以前没用过耶，尝试一下。这里有两个属性，第一个有点陌生，第二个应该是设置毛玻璃效果的虚化吧，先试咱们会的：

确实有虚化效果。那saturate又是干嘛的呢？试试就知道了：

唔，变暗了呢

我们将百分比设置为10%：

完全黑了，红黑了，那湿的透透的了，哈哈哈~

ok，今天分享就到这，觉得有意思的掘友们记得点赞关注加收藏，因为今天你们学会了一个单词：saturate:湿透了。 sa(湿)tu(透)rate(了) ？？？？？？？？？？

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享