实现毛玻璃效果

实现毛玻璃效果

使用CSS实现毛玻璃效果，使用CSS滤镜filter中的blur属性实现。

实现

首先定义一个填充满整个屏幕的背景。

然后定义一个指定长宽的div去实现模糊效果，因为直接在元素上使用blur会将元素以及子元素全部模糊，显然不符合要求，于是使用一个伪元素去实现模糊效果。首先在元素CSS属性设置position: absolute;是为了伪元素去适应长宽使用，使用relative也是可行的，但是会影响下文会提到的拖拽的定位，在伪元素中设置position: absolute;top: 0;left: 0;right: 0; bottom: 0;来继承元素的尺寸，在伪元素中设置背景，在背景上实现模糊效果就可以避免子元素一并模糊的问题。

为了更好的展示效果，实现了一个简单的拖拽功能。

代码示例

    
    



    

        

            
Gaussian Blur
        
    

每日一题

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