CSS filter属性详解

ze_juejin
125 阅读6分钟

CSS filter属性详解

CSS filter属性提供了强大的图形效果处理能力，可以对元素（主要是图片）进行模糊、亮度调整、对比度调整等多种视觉效果处理。

基本语法

.element {
  filter: none | <filter-function> [<filter-function>]* | initial | inherit;
}

常用滤镜函数

1. blur() - 模糊效果

.blur {
  filter: blur(5px);
}
  • 参数：模糊半径，单位px/rem等
  • 值为0时无模糊效果，值越大越模糊

2. brightness() - 亮度调整

.bright {
  filter: brightness(150%);
}
.dark {
  filter: brightness(50%);
}
  • 参数：百分比或小数
  • 100%表示原始亮度
  • 大于100%增加亮度，小于100%降低亮度

3. contrast() - 对比度调整

.high-contrast {
  filter: contrast(200%);
}
.low-contrast {
  filter: contrast(50%);
}
  • 参数：百分比或小数
  • 100%表示原始对比度
  • 大于100%增加对比度，小于100%降低对比度

4. grayscale() - 灰度效果

.grayscale {
  filter: grayscale(100%);
}
  • 参数：百分比或小数
  • 0%为原始图像，100%完全灰度
  • 常用于表示禁用状态或怀旧风格

5. sepia() - 褐色滤镜（复古效果）

.sepia {
  filter: sepia(100%);
}
  • 参数：百分比或小数
  • 0%为原始图像，100%完全褐色

6. saturate() - 饱和度调整

.high-saturation {
  filter: saturate(200%);
}
.low-saturation {
  filter: saturate(50%);
}
  • 参数：百分比或小数
  • 100%表示原始饱和度

7. hue-rotate() - 色相旋转

.hue-rotate {
  filter: hue-rotate(90deg);
}
  • 参数：角度值（deg, rad, grad, turn）
  • 0deg表示原始色相
  • 360deg为一圈，回到原始色相

8. invert() - 反相颜色

.invert {
  filter: invert(100%);
}
  • 参数：百分比或小数
  • 0%为原始图像，100%完全反相

9. opacity() - 透明度调整

.translucent {
  filter: opacity(50%);
}
  • 参数：百分比或小数
  • 100%完全不透明，0%完全透明

10. drop-shadow() - 投影效果

.shadow {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
  • 参数：<offset-x> <offset-y> <blur-radius> <color>
  • 类似于box-shadow，但能贴合非矩形元素的轮廓

11. 组合使用

.combined {
  filter: contrast(175%) brightness(103%) sepia(20%);
}
  • 多个滤镜函数可以组合使用，空格分隔
  • 按顺序应用效果

实际应用示例

下面是一个展示各种滤镜效果的页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Filter属性详解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .intro {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .filters-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .filter-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }
        
        .filter-card:hover {
            transform: translateY(-5px);
        }
        
        .filter-image {
            height: 200px;
            overflow: hidden;
        }
        
        .filter-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: filter 0.3s ease;
        }
        
        .filter-info {
            padding: 20px;
        }
        
        .filter-info h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .filter-info p {
            color: #7f8c8d;
            margin-bottom: 15px;
        }
        
        .filter-info code {
            background: #f8f9fa;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Consolas', monospace;
            color: #e83e8c;
        }
        
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }
        
        .control-group {
            display: flex;
            flex-direction: column;
            min-width: 200px;
        }
        
        .control-group label {
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .control-group input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .combined-demo {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            margin-bottom: 40px;
        }
        
        .combined-image {
            width: 100%;
            max-width: 600px;
            height: 300px;
            margin: 20px auto;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .combined-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            color: #7f8c8d;
            border-top: 1px solid #eee;
        }
        
        /* 滤镜效果类 */
        .blur img {
            filter: blur(3px);
        }
        
        .brightness img {
            filter: brightness(150%);
        }
        
        .contrast img {
            filter: contrast(200%);
        }
        
        .grayscale img {
            filter: grayscale(100%);
        }
        
        .hue-rotate img {
            filter: hue-rotate(90deg);
        }
        
        .invert img {
            filter: invert(100%);
        }
        
        .saturate img {
            filter: saturate(200%);
        }
        
        .sepia img {
            filter: sepia(100%);
        }
        
        .opacity img {
            filter: opacity(50%);
        }
        
        .drop-shadow img {
            filter: drop-shadow(10px 10px 8px rgba(0,0,0,0.5));
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS Filter属性详解</h1>
        <p class="intro">CSS filter属性提供了强大的图形效果处理能力，可以对元素进行模糊、亮度调整、对比度调整等多种视觉效果处理。</p>
    </header>
    
    <section class="filters-container">
        <div class="filter-card blur">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>blur() - 模糊效果</h3>
                <p>对图像应用高斯模糊效果。</p>
                <code>filter: blur(3px);</code>
            </div>
        </div>
        
        <div class="filter-card brightness">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>brightness() - 亮度调整</h3>
                <p>调整图像的亮度。</p>
                <code>filter: brightness(150%);</code>
            </div>
        </div>
        
        <div class="filter-card contrast">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>contrast() - 对比度调整</h3>
                <p>调整图像的对比度。</p>
                <code>filter: contrast(200%);</code>
            </div>
        </div>
        
        <div class="filter-card grayscale">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>grayscale() - 灰度效果</h3>
                <p>将图像转换为灰度图像。</p>
                <code>filter: grayscale(100%);</code>
            </div>
        </div>
        
        <div class="filter-card hue-rotate">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>hue-rotate() - 色相旋转</h3>
                <p>应用色相旋转。</p>
                <code>filter: hue-rotate(90deg);</code>
            </div>
        </div>
        
        <div class="filter-card invert">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>invert() - 反相颜色</h3>
                <p>反转图像中的颜色。</p>
                <code>filter: invert(100%);</code>
            </div>
        </div>
        
        <div class="filter-card saturate">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>saturate() - 饱和度调整</h3>
                <p>调整图像的饱和度。</p>
                <code>filter: saturate(200%);</code>
            </div>
        </div>
        
        <div class="filter-card sepia">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>sepia() - 褐色滤镜</h3>
                <p>将图像转换为深褐色。</p>
                <code>filter: sepia(100%);</code>
            </div>
        </div>
        
        <div class="filter-card opacity">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>opacity() - 透明度调整</h3>
                <p>调整图像的透明度。</p>
                <code>filter: opacity(50%);</code>
            </div>
        </div>
        
        <div class="filter-card drop-shadow">
            <div class="filter-image">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="示例图片">
            </div>
            <div class="filter-info">
                <h3>drop-shadow() - 投影效果</h3>
                <p>对图像应用投影效果。</p>
                <code>filter: drop-shadow(10px 10px 8px rgba(0,0,0,0.5));</code>
            </div>
        </div>
    </section>
    
    <section class="combined-demo">
        <h2>滤镜组合使用</h2>
        <p>多个滤镜可以组合使用，创造出更复杂的效果</p>
        <div class="combined-image">
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="组合滤镜示例" 
                 style="filter: sepia(50%) saturate(150%) hue-rotate(30deg);">
        </div>
        <code>filter: sepia(50%) saturate(150%) hue-rotate(30deg);</code>
    </section>
    
    <footer>
        <p>CSS Filter属性详解 &copy; 2023 - 演示页面</p>
    </footer>
</body>
</html>

浏览器兼容性

CSS filter属性在现代浏览器中得到良好支持：

  • Chrome 18+（部分功能需要-webkit-前缀）
  • Firefox 35+
  • Safari 6+（需要-webkit-前缀）
  • Edge 79+
  • Opera 15+

性能考虑

使用filter属性时需要注意：

  • 某些滤镜（如blur()）可能对性能影响较大，特别是在低性能设备或大面积应用时
  • 动画化filter属性可能比动画化其他属性更消耗资源
  • 建议在需要时使用，并测试目标设备的性能表现

filter属性为Web开发提供了强大的视觉处理能力，无需借助图像编辑软件即可实现多种专业级视觉效果。

avatar
文章
阅读
粉丝