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

前端 3月前 0 31

本文正在参与「金石计划 . 分割6万现金大奖」

咱们在查阅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; */
}

能够看到，圆孔变得密集了，那么布景尺度调到多少会变成彻底通明呢？我口算了一下，应该是50根号2，也便是大概71px。试试？

.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; */
}

为了看的更加清楚，咱们将本来的白色改成黑色，而且把71px改成72px:

呈现黑色点点了！阐明我算的不错，一点不差，我可真棒！ok，咱们持续探究

这个蒙板还不错

咱们现在要对标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: 1pxsolidvar(--border-color);
  height: var(--header-height);
  padding: 0 12px 0 24px;
  background-image: radial-gradient(transparent1px,var(--bg-color)1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
  -webkit-backdrop-filter: saturate(50%) blur(4px);
  top: 0;
}