如何使用 CSS 创建透明或模糊卡片？

在本文中，我们将使用基本的 HTML 和 CSS 属性创建透明或模糊的卡片。模糊效果也称为玻璃效果。

方法：

• 在 body 标签中，创建卡片的布局。
• 为每个组件定义类以使用 CSS 属性。
• 要应用玻璃或模糊效果，请使用背景滤镜属性来模糊卡片。

示例：使用上述方法创建玻璃或模糊或透明卡片。如第一步所述，我们将在 body 标签下创建卡片的布局。

HTML

  

    

  

    

        

            
            
GeeksforGeeks
            
Happy Coding
        
    

  

在上面的代码中，我们创建了一个嵌套的 div 标签，其中包含一个图像和一些文本，并为这些 div 标签分配了将用于样式的类。对于样式，我们使用了基本的 CSS 属性。

注意：您可以为样式创建另一个 CSS 文件，也可以使用相同的 HTML 文件来使用相同的 HTML 文件在样式标签下写入 CSS 属性。

CSS

.background {
    background-color: green;
    height: 150px;
    padding: 10px;
}
  
.card {
    margin-right: auto;
    margin-left: auto;
    width: 250px;
    box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);
    height: 300px;
    border-radius: 5px;
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px;
    text-align: center;
}
  
.card img {
    height: 60%;
}

在上述代码中，在卡片类下，我们为模糊添加了背景滤镜属性，该属性将负责模糊效果。 CSS background-filter 属性用于将效果应用到元素后面的区域。

注意：要更好地了解背景过滤器属性，请单击提到的链接。

完整代码：

HTML

  

    
    

  

    

        

            
            
GeeksforGeeks
            
Happy Coding
        
    

  

输出：