使用css怎么实现毛玻璃效果？

毛玻璃效果指的是元素背景呈现半透明模糊的状态，视觉上类似磨砂玻璃的质感，在卡片、导航栏、弹窗等组件中应用广泛。实现该效果主要通过CSS的滤镜相关属性完成，不同属性适配不同的使用场景。

一、使用backdrop-filter实现毛玻璃效果

backdrop-filter是专门用于设置元素背后区域滤镜效果的CSS属性，它只会模糊元素自身的背景内容，不会影响元素内部的其他子元素，是实现毛玻璃效果的首选方案。

1. 基础语法

该属性的核心取值是blur()，括号内填入模糊半径，数值越大模糊效果越明显，单位通常为px。

2. 完整代码示例

下面是一个卡片组件实现毛玻璃效果的完整示例，卡片背景会模糊背后的渐变背景：

/* 外层容器，设置渐变背景作为毛玻璃的背景源 */
.container {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 毛玻璃卡片样式 */
.glass-card {
    width: 300px;
    height: 200px;
    padding: 20px;
    /* 半透明背景，增强毛玻璃质感 */
    background: rgba(255, 255, 255, 0.2);
    /* 核心属性：设置背景模糊，半径10px */
    backdrop-filter: blur(10px);
    /* 兼容webkit内核浏览器 */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

<div class="container">
    <div class="glass-card">
        <h3>毛玻璃卡片</h3>
        <p>这是一个使用backdrop-filter实现的毛玻璃效果示例</p>
    </div>
</div>

3. 注意事项

• 该属性需要元素背景存在半透明或者透明区域，否则模糊效果无法显现
• 部分旧版本浏览器不支持该属性，需要添加-webkit-前缀做兼容
• 大面积使用该属性可能会对页面性能产生一定影响，建议仅在必要的小范围元素上使用

二、使用filter实现毛玻璃效果

如果需要在不支持backdrop-filter的环境下实现类似效果，可以使用filter属性，不过该属性会对元素自身和所有子元素都生效，使用场景相对受限。

1. 实现思路

通常是给背景元素单独设置filter: blur()，再通过定位让内容元素覆盖在模糊的背景之上，模拟毛玻璃效果。

2. 完整代码示例

.outer {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* 背景元素，单独设置模糊 */
.bg {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: url('https://ipipp.com/bg.jpg') center/cover no-repeat;
    /* 模糊背景，扩大范围避免边缘模糊不完整 */
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

/* 内容容器，覆盖在背景之上 */
.content {
    position: relative;
    z-index: 1;
    width: 300px;
    height: 200px;
    margin: 100px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: #333;
}

<div class="outer">
    <div class="bg"></div>
    <div class="content">
        <h3>filter实现毛玻璃</h3>
        <p>通过模糊背景元素模拟毛玻璃效果</p>
    </div>
</div>

两种方案的选择建议

CSS毛玻璃效果backdrop_filterfilterblur修改时间：2026-06-14 02:18:36