# CSS3核心特性-第8章-8.3-滤镜效果（filter） ## 一、滤镜效果概述 CSS3的`filter`属性用于对元素应用图形效果，如模糊、亮度调整、对比度增强等，无需依赖图片编辑软件即可实现复杂视觉效果。该属性支持多种滤镜函数组合，可作用于图片、文字、背景等任何HTML元素，广泛应用于图片处理、交互动效和主题切换场景。 ## 二、核心语法与取值 ### 2.1 基础语法 ```css /* 单个滤镜 */ .element { filter: blur(5px); } /* 多个滤镜组合（空格分隔） */ .element { filter: brightness(1.2) contrast(1.5) grayscale(0.5); } /* 重置滤镜 */ .element { filter: none; } ``` ### 2.2 常用滤镜函数及取值 | 滤镜函数 | 作用 | 取值范围/说明 | 示例 | |------------------------|-------------------------------|---------------------------------------|---------------------------------------| | `blur(px)` | 高斯模糊 | 数值（px），值越大越模糊 | `blur(5px)`（5像素模糊） | | `brightness(%)` | 亮度调整 | 0%（全黑）~ 100%（原图）~ ∞（更亮） | `brightness(150%)`（亮度提升50%） | | `contrast(%)` | 对比度调整 | 0%（全灰）~ 100%（原图）~ ∞（更高） | `contrast(200%)`（对比度提升100%） | | `grayscale(%)` | 灰度转换 | 0%（原图）~ 100%（全灰） | `grayscale(80%)`（80%灰度） | | `hue-rotate(deg)` | 色相旋转 | 角度（0deg~360deg），0deg为原图 | `hue-rotate(90deg)`（色相旋转90度） | | `invert(%)` | 颜色反转 | 0%（原图）~ 100%（完全反转） | `invert(100%)`（完全负片效果） | | `opacity(%)` | 透明度调整 | 0%（完全透明）~ 100%（不透明） | `opacity(50%)`（半透明） | | `saturate(%)` | 饱和度调整 | 0%（无饱和）~ 100%（原图）~ ∞（更高） | `saturate(200%)`（饱和度提升100%） | | `sepia(%)` | 褐色调（复古效果） | 0%（原图）~ 100%（全褐色） | `sepia(70%)`（70%复古褐色） | | `drop-shadow(h v b c)` | 阴影效果（类似box-shadow） | h（水平偏移）、v（垂直偏移）、b（模糊）、c（颜色） | `drop-shadow(2px 2px 4px rgba(0,0,0,0.5))` | ## 三、实战示例 ### 3.1 基础滤镜效果 **示例1：图片模糊与亮度调整** ```html ``` ### 3.2 组合滤镜效果 **示例2：复古照片风格（褐色调+对比度+饱和度）** ```html ``` ### 3.3 交互动效中的滤镜应用 **示例3：按钮悬停时的灰度转彩色效果** ```html 关注我们 ``` ## 四、注意事项 ### 4.1 性能优化 - **避免过度使用**：多个滤镜组合会增加浏览器计算负担，可能导致动画卡顿，建议在关键帧动画中减少滤镜数量。 - **硬件加速**：对应用滤镜的元素添加`transform: translateZ(0)`可触发GPU加速，但需注意内存占用。 ### 4.2 兼容性处理 - **浏览器支持**：现代浏览器（Chrome 53+、Firefox 35+、Edge 12+）完全支持，IE不支持`filter`属性。 - **降级方案**：对不支持的浏览器，可使用JavaScript检测并提供替代样式： ```javascript if (!CSS.supports('filter', 'blur(5px)')) { document.querySelector('.target').classList.add('no-filter-fallback'); } ``` ### 4.3 与其他属性的区别 - **`filter: drop-shadow()` vs `box-shadow`**： - `drop-shadow`可作用于元素的透明区域（如PNG图片的非矩形部分），而`box-shadow`仅作用于元素的盒模型边界。 - `drop-shadow`性能略低于`box-shadow`，优先使用`box-shadow`实现简单阴影。 ## 五、自测题 1. 如何使用`filter`属性实现一张图片的"黑白照片"效果？ A. `filter: grayscale(100%)` B. `filter: invert(100%)` C. `filter: sepia(100%)` *答案：A* 2. 以下哪个滤镜组合可实现"高对比度黑白图片"效果？ A. `filter: grayscale(100%) contrast(150%)` B. `filter: brightness(120%) saturate(0%)` C. `filter: invert(100%) blur(1px)` *答案：A* 3. 简述`filter: opacity(50%)`与`opacity: 0.5`的区别。 *答案：两者视觉效果相同，但`filter: opacity()`会触发GPU加速，可能影响性能；`opacity`属性兼容性更广泛（IE8+支持）。*