颗粒化的毛玻璃效果

前言

最近又看了一下css大佬 chokcoco 的文章发现这一篇 妙用 CSS 构建花式透视背景效果 文章，发现真的很有意思。每次看大佬的文章都能学到不少东西，因此根据大佬的教程自己也尝试一下。

饿了么具体效果可以查看饿了么官网，Element UI

不知道怎么说，大佬的css水平是真牛逼。

实现

看了一下大佬的介绍，原理就是渐变背景加上滤镜

颗粒背景

透明到黑色的径向渐变

<div></div>

div {
    width: 300px;
    height: 100px;

    // 设置径向渐变
    background: radial-gradient(transparent, #000 20px);
    background-size: 40px 40px;
}

需要注意的是，图里的白色部分应该是透明的，这样就可以透出背后的背景。

div {
    background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
    background-size: 4px 4px;
}

demo

<template>
    <div class="container">
        <div class="aa"></div>
        <p class="p1">111</p>
        <p class="p2">111</p>
        <p class="p3">111</p>
    </div>
</template>

<script setup lang="ts">

</script>
<style scoped lang="scss">
.container {
    width: 400px;
    height: 200px;
    overflow-y: auto;
}

.aa {
    position: fixed;
    width: 300px;
    height: 100px;

    // 设置径向渐变
    background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
    background-size: 4px 4px;
}

.p1 {
    width: 300px;
    height: 100px;
    background-color: red;
}

.p2 {
    width: 300px;
    height: 100px;
    background-color: blue;
}

.p3 {
    width: 300px;
    height: 200px;
    background-color: pink;
}
</style>

加上滤镜
此时透出的背景看上去非常生硬，也不美观，所以，我们还需要 backdrop-filter: blur()

div {
    background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
    background-size: 4px 4px;
    backdrop-filter: blur(10px);
}

这里需要注意的是，background-size 的大小控制，和不同的 backdrop-filter: blur(10px) 值，都会影响效果。

扩展

我们可以尝试替换掉 background: radial-gradient() 图形，及改变 background-size，尝试各种不同形状的透视背景。

<template>
    <div class="container">
        <div class="aa"></div>
        <p class="p1">111</p>
        <p class="p2">111</p>
        <p class="p3">111</p>
    </div>
</template>

<script setup lang="ts">

</script>
<style scoped lang="scss">
.container {
    width: 400px;
    height: 200px;
    overflow-y: auto;
}

.aa {
    position: fixed;
    width: 300px;
    height: 100px;

    background: linear-gradient(45deg, transparent, #fff 4px);
    background-size: 6px 6px;
    backdrop-filter: saturate(50%) blur(4px);
}

.p1 {
    width: 300px;
    height: 100px;
    background-color: red;
}

.p2 {
    width: 300px;
    height: 100px;
    background-color: blue;
}

.p3 {
    width: 300px;
    height: 200px;
    background-color: pink;
}
</style>