CSS磨砂玻璃穿透效果 filter: blur(4px)；backdrop-filter: blur(4px)；

一、参考

1. 纯CSS教你实现磨砂玻璃背景效果（附代码）

二、问题描述

工作中，UCD 设计了一个“磨砂穿透”的效果，本想着画一个磨砂效果，然后在通过透明度穿透，实现“磨砂穿透”的效果，然而，看到纯CSS教你实现磨砂玻璃背景效果（附代码） 这篇文章，发现可以将这种效果做成一个通用的组件

三、filter: blur(4px) 原理说明

CSS3 filter(滤镜) 属性

1. 画一个div，让div的高宽比与图片保持等比例
2. 设置div背景为整张图片，完全覆盖div内容，感觉div就展示完整图片
3. div添加一个伪类 ::after，使用absolute 定位 完全覆盖div的图片，然后使用filter: blur(4px);实现磨砂效果
4. 通过改变 absolute 的top、left、right、bottom 属性，确定哪些范围为磨砂效果

使用下图来描述过程：

3.1 项目代码说明

1. 磨砂图片效果的容器

<div class="filterbg"></div>

2. 磨砂效果的 CSS

.filterbg {
	position: absolute;
	top: -14px;
	right: -11px;
	width: 264px; // 原始图片的宽度
	height: 178px; // 原始图片的高度
	background-image: url('~@/assets/images/analyse/bg_线网密度_右侧@2x.png');
	background-size: cover;

	&::after {
	  content: "";
	  display: inline-block;
	  position: absolute;
	  top: 15px;
	  right: 11px;
	  left: 0;
	  bottom: 0;
	  background-image: url('~@/assets/images/analyse/bg_线网密度_右侧@2x.png');
	  background-size: 264px 178px; // 原始图片的 高度和宽度
	  filter: blur(4px);
	  /* 
	  重点：background-position: left bottom; 表示以图片的 左、下为基准点，这样就可以改变右上 top、right 属性，确定要展示的内容
	  重点：background-position: left top; 表示以图片的 左、上为基准点，这样就可以改变右下 bottom、right 属性，确定要展示的内容
	  */
	  background-position: left bottom;
	  background-repeat: no-repeat;
	}
}

四、backdrop-filter: blur(5px) 原理说明

CSS backdrop-filter 属性

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

.box {
        backdrop-filter: blur(5px);
        background-color: rgba(255, 255, 255, 0.5);
    }

总结

1. 使用backdrop-filter 可以更好的实现 “透过磨砂效果”
2. filter: blue(4px) 只作用于元素本身