# 实现毛玻璃效果
使用`CSS`实现毛玻璃效果，使用`CSS`滤镜`filter`中的`blur`属性实现。
## 实现
首先定义一个填充满整个屏幕的背景。
```html
```
然后定义一个指定长宽的`div`去实现模糊效果，因为直接在元素上使用`blur`会将元素以及子元素全部模糊，显然不符合要求，于是使用一个伪元素去实现模糊效果。首先在元素`CSS`属性设置`position: absolute;`是为了伪元素去适应长宽使用，使用`relative`也是可行的，但是会影响下文会提到的拖拽的定位，在伪元素中设置`position: absolute;top: 0;left: 0;right: 0; bottom: 0;`来继承元素的尺寸，在伪元素中设置背景，在背景上实现模糊效果就可以避免子元素一并模糊的问题。
```html
```
为了更好的展示效果，实现了一个简单的拖拽功能。
```html
```
## 代码示例
```html
毛玻璃效果
```
## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```
## 参考
```
https://www.jb51.net/article/73157.htm
https://www.cnblogs.com/ivan5277/p/10007273.html
https://blog.csdn.net/u010852544/article/details/43967749
```