CSS 实现磨砂玻璃（毛玻璃）效果样式

要实现磨砂玻璃背景 
    
    
    
，可以使用 CSS3 中的 ::before 伪元素和 backdrop-filter 属性
     


     


     


    ，结合 opacity 属性和 blur() 函数来实现    
    
    
    。

具体实现步骤如下：

创建一个具有背景的元素 




 




 




 


，例如一个 div 元素  


     


     


     


。 div { background-image: url("your-image-url"); } 使用 ::before 伪元素为元素添加一个半透明的背景层


 




 




 




。 div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); }

在这个示例中 

   

   

   

，设置了 ::before 伪元素的内容为空
     

     

     

   ，位置为绝对定位  




  




  




  

，宽度和高度分别为 100% 


  


  


  


，并设置了一个半透明的白色背景色   

   

   

   。

使用 backdrop-filter 属性对 ::before 伪元素的背景进行模糊处理   

     

     

     

。 div::before { /* ... */ backdrop-filter: blur(10px); }

在这个示例中
     
     
     
  ，使用 blur() 函数设置模糊程度为 10 像素



  




  




  




。可以根据需要调整这个值来控制模糊程度  


  


  


  。

为了让磨砂玻璃效果更加明显   




   




   




   
，可以通过 opacity 属性降低 ::before 伪元素的不透明度    
     
     
     
。 div::before { /* ... */ opacity: 0.8; }

在这个示例中 



 



 



 



，将 ::before 伪元素的不透明度降低到 0.8                ，以增强磨砂玻璃效果




   




   




   




。

完整的 CSS 代码如下：

div { background-image: url("your-image-url"); position: relative; } div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); opacity: 0.8; }

通过这种方式
    




    




    




    ，可以使用 CSS 快速简单地实现磨砂玻璃背景效果 



 



 



 。需要注意的是



















，backdrop-filter 属性并不是所有浏览器都支持                ，需要进行兼容性测试和兼容性处理                    。