css3实现毛玻璃效果

标签：position   背景色   个人   问题：   需要   对比   css   hid   解决   

  场景：使区域试图模糊，例如未登陆情况下需要模糊显示某一区域。

  方法：使用css滤镜filter属性,

    　　 例如：filter:blur(5px),其中blur中的数值越大越模糊。

           效果如下：

        但是仔细看看会有几个问题：

        ①、超出图片也被模糊了，尤其是背景色和图片颜色反差很大更容易发现这个模糊化的边缘。

        ②、图片边缘内部，很窄的部分是接近透明的，会漏出背景的颜色。

       问题①的解决方案：

　　　　1）、在图片外部加一层容器，容器的宽高与图片一致，设置容器样式为 overflow: hidden; 即可去除边缘模糊；

　　　　　　修改后：

　　　　2）、也可以直接在图片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一个矩形，需要注意剪裁的元素必须为绝对定位的元素，即需要同时设置 position: absolute

                   clip属性深入了解：https://segmentfault.com/a/1190000011727957

　　问题②的解决方案：

      　　　　图片外部添加一层容器，宽高和图片一致，同时设置相同的图片作为容器的背景图，这样漏出来的就是容器里的背景图。

 　　filter的另外两个属性

• brightness() - 设置元素亮度，值越大越亮，为百分比参数；
• contrast() - 设置元素对比度，值越大对比越明显，为百分比参数；    注：实际上个人感觉这两个属性的效果差不多。

css3实现毛玻璃效果

标签：position   背景色   个人   问题：   需要   对比   css   hid   解决   

原文地址：https://www.cnblogs.com/hp0844182/p/9657708.html