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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

大家在查阅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这个是什么以前没用过耶尝试一下。这里有两个属性第一个有点陌生第二个应该是设置毛玻璃效果的虚化吧先试咱们会的