CSS backdrop-filter 属性详解

backdrop-filter 是一个强大的 CSS 属性，可以为元素后面的区域添加视觉效果（如模糊、颜色偏移等），而不会影响元素本身的内容。

实现思路

我将创建一个展示页面，演示多种 backdrop-filter 效果，包括模糊、亮度调整、对比度调整和自定义颜色效果。页面将包含一个固定背景和多个应用了不同滤镜效果的卡片。

代码实现

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS backdrop-filter 效果展示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            color: #fff;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card h2 {
            margin-bottom: 15px;
            font-size: 1.8rem;
            color: #fff;
        }
        
        .card p {
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .code {
            background: rgba(0, 0, 0, 0.2);
            padding: 12px;
            border-radius: 8px;
            font-family: monospace;
            overflow-x: auto;
            margin-top: 15px;
        }
        
        /* 不同的 backdrop-filter 效果 */
        .blur {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        .brightness {
            backdrop-filter: brightness(0.6);
            -webkit-backdrop-filter: brightness(0.6);
        }
        
        .contrast {
            backdrop-filter: contrast(180%);
            -webkit-backdrop-filter: contrast(180%);
        }
        
        .grayscale {
            backdrop-filter: grayscale(80%);
            -webkit-backdrop-filter: grayscale(80%);
        }
        
        .hue-rotate {
            backdrop-filter: hue-rotate(120deg);
            -webkit-backdrop-filter: hue-rotate(120deg);
        }
        
        .invert {
            backdrop-filter: invert(70%);
            -webkit-backdrop-filter: invert(70%);
        }
        
        .opacity {
            backdrop-filter: opacity(30%);
            -webkit-backdrop-filter: opacity(30%);
        }
        
        .saturate {
            backdrop-filter: saturate(200%);
            -webkit-backdrop-filter: saturate(200%);
        }
        
        .sepia {
            backdrop-filter: sepia(60%);
            -webkit-backdrop-filter: sepia(60%);
        }
        
        .multiple {
            backdrop-filter: blur(5px) brightness(0.8) hue-rotate(45deg);
            -webkit-backdrop-filter: blur(5px) brightness(0.8) hue-rotate(45deg);
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            background: rgba(0, 0, 0, 0.2);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS backdrop-filter 属性</h1>
        <p class="subtitle">
            <code>backdrop-filter</code> CSS 属性可以让你为一个元素后面的区域添加图形效果（如模糊或颜色偏移）。
            因为它适用于元素背后的所有内容，为了看到效果，必须使元素或其背景至少部分透明。
        </p>
    </header>
    
    <div class="container">
        <div class="card blur">
            <h2>blur()</h2>
            <p>对元素背后区域应用高斯模糊效果。</p>
            <div class="code">backdrop-filter: blur(10px);</div>
        </div>
        
        <div class="card brightness">
            <h2>brightness()</h2>
            <p>调整元素背后区域的亮度。</p>
            <div class="code">backdrop-filter: brightness(0.6);</div>
        </div>
        
        <div class="card contrast">
            <h2>contrast()</h2>
            <p>调整元素背后区域的对比度。</p>
            <div class="code">backdrop-filter: contrast(180%);</div>
        </div>
        
        <div class="card grayscale">
            <h2>grayscale()</h2>
            <p>将元素背后区域转换为灰度。</p>
            <div class="code">backdrop-filter: grayscale(80%);</div>
        </div>
        
        <div class="card hue-rotate">
            <h2>hue-rotate()</h2>
            <p>对元素背后区域应用色相旋转。</p>
            <div class="code">backdrop-filter: hue-rotate(120deg);</div>
        </div>
        
        <div class="card invert">
            <h2>invert()</h2>
            <p>反转元素背后区域的颜色。</p>
            <div class="code">backdrop-filter: invert(70%);</div>
        </div>
        
        <div class="card opacity">
            <h2>opacity()</h2>
            <p>调整元素背后区域的透明度。</p>
            <div class="code">backdrop-filter: opacity(30%);</div>
        </div>
        
        <div class="card saturate">
            <h2>saturate()</h2>
            <p>调整元素背后区域的饱和度。</p>
            <div class="code">backdrop-filter: saturate(200%);</div>
        </div>
        
        <div class="card sepia">
            <h2>sepia()</h2>
            <p>对元素背后区域应用深褐色调。</p>
            <div class="code">backdrop-filter: sepia(60%);</div>
        </div>
        
        <div class="card multiple">
            <h2>多重效果</h2>
            <p>可以组合多个滤镜函数。</p>
            <div class="code">backdrop-filter: blur(5px) brightness(0.8) hue-rotate(45deg);</div>
        </div>
    </div>
    
    <footer>
        <p>CSS backdrop-filter 属性展示 | 兼容性：Chrome 76+, Edge 79+, Safari 9+, Firefox 不支持默认情况下</p>
    </footer>
</body>
</html>

功能特点

多种滤镜效果展示：包括模糊、亮度、对比度、灰度、色相旋转、反相、透明度、饱和度和深褐色调等效果
响应式设计：使用CSS Grid布局，适应各种屏幕尺寸
交互效果：卡片悬停时有上浮效果
代码展示：每个效果都显示对应的CSS代码
视觉效果：使用渐变背景和半透明卡片展示滤镜效果

使用方法

直接将上述代码复制到HTML文件中，在浏览器中打开即可查看各种backdrop-filter效果。注意，某些浏览器（如Firefox）可能需要手动启用backdrop-filter支持。