📜  如何使用 HTML 和 CSS 制作玻璃/模糊效果叠加?

📅  最后修改于: 2021-11-07 07:56:43             🧑  作者: Mango

为了在叠加层上产生背景模糊效果, filter:blur()属性与::before pesudo 元素一起使用。 “filter:blur()”属性在框或任何需要的元素上提供模糊效果,“before”用于在不应用任何额外标记的情况下添加模糊背景。

HTML 代码:在本节中,我们将使用 HTML 代码来设计网页的基本结构。



  

    
    
        How to make a CSS glass/blur
        effect work for an overlay?
    
      
    

  

    
        
            

GeeksforGeeks

            

                It is a computer science portal for geeks.                 It is a platform where you can learn and                 practice programming problems. It contains                 programming content, web technology content,                 and some other domain content also.             

                        
    
  

CSS 代码:在本节中,我们将使用一些 CSS 属性来使用 HTML 和 CSS 制作玻璃/模糊效果叠加。


组合代码:在本节中,我们将组合以上两节代码(HTML 和 CSS 代码)来制作玻璃/模糊效果叠加。



  

    
    
        How to make a CSS glass/blur
        effect work for an overlay?
    
      
    
  
    

  

    
        
            

GeeksforGeeks

            

                It is a computer science portal for geeks.                 It is a platform where you can learn and                 practice programming problems. It contains                 programming content, web technology content,                 and some other domain content also.             

                        
    
  

输出: