前端模糊实现那点事

前言

在一个资源网站发现一个弹框效果，如下图，点击搜索框后，网站整个内容模糊了，只有弹框区内容是清晰的，看起来弹框区的元素更突出显眼一点，移动端这种类似模糊效果很常见，在PC端的网站，我日常逛的一些网站似乎没见过这样做模糊效果，虽然这种背景模糊只是前端的一个小效果，但是用起来的时候给我一种眼前一亮的感觉，这个网站的产品设计是走了心的 👍👍，接下来我们就顺藤摸瓜，分析一下 Ta 的模糊实现

EMOJIALL官方地址: www.emojiall.com/zh-hans

分析

F12 打开浏览器控制台，在 元素 找对应的 html 标签，可以发现是加了一个 div 层，然后这个 div 添加了 backdrop-filter: blur(1px)，通过取消这个 css 属性，可以恢复清晰状态

小技巧

有些效果中的 html 元素是动态控制的，如果内容太多静态情况下可能不好找，可以一边操作页面，一边观察 元素 的内容变化去分析

backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

上面是官方介绍，在这个站点里的实现似乎是搜索弹框后面添加了一个 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 提供模糊、灰度等过滤效果的属性。它类似于 CSS filter属性，并且接受相同的函数

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 代码链接

github.com/gywgithub/F…

总结

把一些很简单CSS属性结合起来，就能实现很多很酷的效果，培养善于发现美的眼睛，去探索世界的美好

这个广告里面插图的这个男人，猛的一看有点像前端祖师爷尤大呀，你们有这感觉吗？🤨🤨