前言
在一个资源网站发现一个弹框效果，如下图，点击搜索框后，网站整个内容模糊了，只有弹框区内容是清晰的，看起来弹框区的元素更突出显眼一点，移动端这种类似模糊效果很常见，在PC端的网站，我日常逛的一些网站似乎没见过这样做模糊效果，虽然这种背景模糊只是前端的一个小效果，但是用起来的时候给我一种眼前一亮的感觉，这个网站的产品设计是走了心的 👍👍，接下来我们就顺藤摸瓜，分析一下 Ta 的模糊实现
EMOJIALL官方地址: www.emojiall.com/zh-hans
分析
F12 打开浏览器控制台，在 元素 找对应的 html 标签，可以发现是加了一个 div 层，然后这个 div 添加了 backdrop-filter: blur(1px)，通过取消这个 css 属性，可以恢复清晰状态
小技巧
有些效果中的 html 元素是动态控制的，如果内容太多静态情况下可能不好找，可以一边操作页面，一边观察 元素 的内容变化去分析
backdrop-filter
backdrop-filterCSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
上面是官方介绍，在这个站点里的实现似乎是搜索弹框后面添加了一个 div，然后 div 元素设置了 backdrop-filter: blur(1px)，里面使用了 blur() 函数
blur()
将高斯模糊应用于输入图像
使用方式为
blur(radius)radius 是模糊的半径。定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。值为 0 会使输入保持不变。该值为空则为 0
支持 0，px，rem 写法
注意！ 直接 blur(100) 是无效的
本地复现
本地使用 div 模拟一个弹框，然后设置 div 的 z-index 属性，使其高度高于页面用来做背景的 div，设置 div 的 backdrop-filter: blur(2px) 属性，达到背景元素模糊的效果
这里提供了一个对照组后的效果，直接看 backdrop-filter:blur(2px) 的设置，背景内容为文字和图片，div 标签内容设置基于父元素相对定位的方式，使其在背景区域之上，设置 backdrop-filter: blur(2px) 使其后面元素模糊
<div class="position-relative"> <div class="position-border backdrop-filter"> backdrop-filter:blur(2px) 效果 </div> <div class="filter-blur"> <p>人物和(>^ω^<)喵</p> <img src="../img/1.jpg" /> </div> </div>
.position-border { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; } .backdrop-filter { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
移动端 HarmoneyOS 系统中APP的操作菜单，也是类似的弹框内容后面的元素都模糊
小结
到这里，就实现了背景模糊的效果，主要设置 backgrop-filter 属性，在实际应用中按需调整元素就可以了，还有其他实现模糊的方式吗？
扩展
filter
filter属性将模糊或颜色偏移等图形效果应用于元素
filter 属性可以直接实现当前元素模糊，同样也是设置 blur(2px), 直接在文字和图片的父级 div 上设置 filter:blur(2px) 属性，直接在元素上设置模糊效果和 backgrop-filter 属性效果一致，只是使用场景不一样
<div> <h3>filter:blur(2px) 效果</h3> <div class="filter-blur"> <p>人物和(>^ω^<)喵</p> <img src="../img/1.jpg" /> </div> </div>
.filter-blur { filter: blur(2px); }
CSS filter 常用函数
- blur()：给元素添加高斯模糊效果
- brightness()：给元素添加亮度调节效果
- contrast()：给元素添加对比度调节效果
- drop-shadow()：给元素添加投影效果
- grayscale()：给元素添加灰度转换效果
- hue-rotate()：给元素添加色相旋转效果
- invert()：给元素添加反色效果
- opacity()：给元素添加透明度调节效果
- saturate()：给元素添加饱和度调节效果
- sepia()：给元素添加怀旧色调效果
CanvasRenderingContext2D.filter
CanvasRenderingContext2D.filter是 Canvas 2D API 提供模糊、灰度等过滤效果的属性。它类似于 CSSfilter属性，并且接受相同的函数
canvas 中使用 CanvasRenderingContext2D.filter 也可以实现模糊效果，设置 blur(2px)
<canvas id="canvas" style="width:400px;height: 140px;border:1px solid #ccc;"></canvas>
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.filter = "blur(2px)"; ctx.font = "30px serif"; ctx.fillText("人物和(>^ω^<)喵", 10, 100);
Demo 代码链接
总结
把一些很简单CSS属性结合起来，就能实现很多很酷的效果，培养善于发现美的眼睛，去探索世界的美好
这个广告里面插图的这个男人，猛的一看有点像前端祖师爷尤大呀，你们有这感觉吗？🤨🤨
