博客使用的 Butterfly 主题好看是好看，但是果然太费图片了……特别是有时候文章使用的 cover 图清晰度不是很高，在大屏幕上看默认的效果就可能很糊，比如之前文章里用的这张图：
如果能加上模糊效果的话，就能在一定程度上掩盖图片分辨率不足的缺陷，显得更加美观。
一般实现背景模糊，直接在元素上加 filter: blur(3px); 的样式就可以了，比如：
查看源码
1
2
3
4
5
6
| <style>
.demo_img {
filter: blur(3px);
}
</style>
<img class="demo_img" src='/images/bg.webp'/>
|
但是这种方式有一个很大的问题，就是如果给元素设置模糊，对其子元素也是生效的，比如：
DebuggerX
查看源码
1
2
3
4
5
6
7
8
9
10
11
12
| <style>
.demo_img {
filter: blur(2px);
background-image:url("/images/bg.webp");
}
.demo_img > span {
margin: 50px auto;
}
</style>
<div class="demo_img">
<span>DebuggerX</span>
</div>
|
可以看到 div 里的文字也变得模糊了，如果想要只让 div 模糊，文字清晰，就需要结构，把文字从 div 中挪出来：
查看源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <style>
.demo_img {
width: 50%;
position: relative;
display: flex;
margin: auto;
}
.demo_img > div {
background-image:url("/images/bg.webp");
filter: blur(2px);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.demo_img > span {
margin: 50px auto;
z-index: 1;
}
</style>
<div class="demo_img" style="position: relative">
<div>
</div>
<span>DebuggerX</span>
</div>
|
这不仅需要额外的一个 div 作为定位容器，设置背景的 div 需要绝对定位，可能还需要调整内部文字或者其他元素的叠放次序。
而且针对现在博客的情况，页面元素和结构都是框架和主题自动生成的，如果要改，要么改源码，要么在页面生成后动态运行 js 脚本调整，都挺麻烦的……
那么没有不用改页面结构的方法么？
那就是 backdrop-filter 这个属性了：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter
这个属性的用法和 filter 相同，不同点是 backdrop-filter 可以让你为一个元素后面区域添加图形效果，同样上面的例子用它来实现：
DebuggerX
查看源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
.demo_img_backdrop {
background-image:url("/images/bg.webp");
width: 50%;
display: flex;
margin: auto;
position: relative;
}
.demo_img_backdrop:before {
position: absolute;
width: 100%;
height: 100%;
content: '';
backdrop-filter: blur(3px);
}
.demo_img_backdrop > span {
margin: 50px auto;
z-index: 1;
}
</style>
<div class="demo_img_backdrop">
<span>DebuggerX</span>
</div>
|
测试下来兼容性还好，主流浏览器应该都能支持，但是感觉加上以后好像会影响部分设备浏览页面的流畅度，所以目前只应用在文章页面，主页的封面图还是保持原样吧 
