📜  使用 HTML 和 CSS 设计磨砂玻璃效果

📅  最后修改于: 2021-08-30 12:41:20             🧑  作者: Mango

在本文中,我们将使用 bootstrap 4 卡片类实现磨砂玻璃效果。下图是您将作为本文的最终结果获得的最终输出。

方法:

1. 设置正文:让我们首先为您的网页设置背景。在           

        
            

GeeksforGeeks

        
    
  


您可以在此处阅读上述属性

2.霜玻璃卡:在样式标签下,使用以下代码,

CSS

.card {
      box-shadow: 0 0 5px 0 ;
      background: inherit;
      backdrop-filter: blur(10px);
      
}

那么我们这里有什么,

  • box-shadow 此属性用于为元素的框架提供类似阴影的效果。
  • background :使用它使元素透明并具有与您的网页相同的背景(在 body 类中必须具有“背景附件:固定”,)
  • 背景过滤器使用它可以将效果应用于元素后面的区域。 (也请阅读本文)基本上,这是减少大量 CSS 样式的属性。
  • margin 边距和填充根据您的需要。

注意: Mozilla 的 Firefox 浏览器存在问题,在某些情况下,背景过滤器无法正常工作,Chrome 和 Edge 工作正常。

3.

正文:

HTML


    
        
                     
    

最终代码:

HTML



  

    
  
    

  

  
    
        
            

GeeksforGeeks

        
    
  

输出: