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 属性并不是所有浏览器都支持                     ，需要进行兼容性测试和兼容性处理                     。