CSS Filters 滤镜详解

CSS Filters 滤镜详解一、Filters 基础概念CSS Filters 是 CSS3 引入的强大视觉效果工具允许我们对元素应用各种图像处理效果。Filters 可以应用于任何元素包括图片、文字、背景等。1.1 Filter 属性.element { filter: none | filter-function [filter-function]*; }1.2 滤镜函数列表CSS 提供了多种滤镜函数blur()- 模糊效果brightness()- 亮度调整contrast()- 对比度调整grayscale()- 灰度转换hue-rotate()- 色相旋转invert()- 颜色反转opacity()- 透明度saturate()- 饱和度调整sepia()- 褐色调drop-shadow()- 阴影效果二、基础滤镜函数2.1 blur() - 模糊.element { filter: blur(5px); filter: blur(0.5rem); }参数值越大模糊效果越明显。2.2 brightness() - 亮度.element { filter: brightness(1); /* 正常亮度 */ filter: brightness(1.5); /* 提高亮度 50% */ filter: brightness(0.5); /* 降低亮度 50% */ }值为 0 时完全黑色大于 1 增加亮度小于 1 降低亮度。2.3 contrast() - 对比度.element { filter: contrast(1); /* 正常对比度 */ filter: contrast(1.5); /* 增加对比度 */ filter: contrast(0.5); /* 降低对比度 */ }2.4 grayscale() - 灰度.element { filter: grayscale(0); /* 正常颜色 */ filter: grayscale(1); /* 完全灰度 */ filter: grayscale(50%); /* 50% 灰度 */ }2.5 hue-rotate() - 色相旋转.element { filter: hue-rotate(0deg); filter: hue-rotate(90deg); filter: hue-rotate(180deg); filter: hue-rotate(360deg); /* 等同于 0deg */ }2.6 invert() - 颜色反转.element { filter: invert(0); /* 正常颜色 */ filter: invert(1); /* 完全反转 */ filter: invert(50%); /* 半反转 */ }2.7 opacity() - 透明度.element { filter: opacity(1); /* 完全不透明 */ filter: opacity(0.5); /* 50% 透明度 */ filter: opacity(0); /* 完全透明 */ }注意filter: opacity()与opacity属性类似但filter会影响子元素而opacity属性则不会。2.8 saturate() - 饱和度.element { filter: saturate(1); /* 正常饱和度 */ filter: saturate(2); /* 饱和度加倍 */ filter: saturate(0); /* 完全不饱和灰度 */ }2.9 sepia() - 褐色调.element { filter: sepia(0); /* 正常颜色 */ filter: sepia(1); /* 完全褐色 */ filter: sepia(50%); /* 半褐色 */ }2.10 drop-shadow() - 阴影.element { filter: drop-shadow(offset-x offset-y blur-radius color); filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); }与box-shadow的区别drop-shadow会跟随元素的形状包括透明区域box-shadow始终是矩形三、滤镜组合可以组合多个滤镜函数按顺序依次应用.element { filter: brightness(1.2) contrast(1.1) saturate(1.3); }实战案例复古照片效果.photo { filter: sepia(0.3) contrast(1.1) brightness(0.9); }实战案例高对比度黑白效果.black-white { filter: grayscale(1) contrast(1.2); }四、高级应用场景4.1 图片悬停效果.image-container { overflow: hidden; } .image-container img { transition: filter 0.3s ease; } .image-container:hover img { filter: brightness(1.1) saturate(1.2); }4.2 毛玻璃效果增强.glass-effect { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }4.3 动态滤镜动画keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .animated { animation: pulse 2s ease-in-out infinite; }4.4 文字渐变滤镜.gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); }4.5 故障艺术效果.glitch { position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch::before { color: #ff0000; animation: glitch-1 0.5s infinite; filter: blur(2px); } .glitch::after { color: #00ffff; animation: glitch-2 0.5s infinite; filter: blur(2px); } keyframes glitch-1 { 0%, 100% { clip-path: inset(0 0 90% 0); transform: translate(-2px); } 50% { clip-path: inset(10% 0 60% 0); transform: translate(2px); } } keyframes glitch-2 { 0%, 100% { clip-path: inset(60% 0 10% 0); transform: translate(2px); } 50% { clip-path: inset(90% 0 0 0); transform: translate(-2px); } }五、SVG 滤镜CSS Filters 也可以引用 SVG 滤镜svg width0 height0 defs filter idcustom-blur feGaussianBlur inSourceGraphic stdDeviation5 / /filter /defs /svg div stylefilter: url(#custom-blur); !-- 内容 -- /div高级 SVG 滤镜示例svg width0 height0 defs filter iddisplacement feTurbulence typefractalNoise baseFrequency0.05 numOctaves3 resultnoise/ feDisplacementMap inSourceGraphic in2noise scale20 xChannelSelectorR yChannelSelectorG/ /filter /defs /svg div stylefilter: url(#displacement); 扭曲效果 /div六、性能考虑6.1 性能影响blur()- 高模糊值会影响性能drop-shadow()- 比box-shadow性能开销更大组合多个滤镜会叠加性能消耗6.2 优化建议.element { will-change: filter; filter: blur(5px); }使用will-change告知浏览器提前准备 GPU 加速。七、浏览器兼容性滤镜函数ChromeFirefoxSafariIEblur()53359.110brightness()53359.110contrast()53359.110grayscale()53359.110hue-rotate()53359.110invert()53359.110opacity()53359.110saturate()53359.110sepia()53359.110drop-shadow()53359.110八、实战案例图片画廊滤镜效果.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .gallery-item { overflow: hidden; border-radius: 8px; transition: transform 0.3s ease, filter 0.3s ease; } .gallery-item:hover { transform: scale(1.05); } .gallery-item img { width: 100%; height: 150px; object-fit: cover; filter: saturate(0.8) contrast(0.9); } .gallery-item:hover img { filter: saturate(1.1) contrast(1.05); } .gallery-item.featured img { filter: sepia(0.2) brightness(1.1); }九、总结CSS Filters 是强大的视觉效果工具可以实现基础效果- 亮度、对比度、饱和度调整特殊效果- 模糊、灰度、色相旋转组合效果- 多种滤镜叠加动画效果- 动态滤镜变化SVG 滤镜- 更复杂的自定义效果掌握 CSS Filters 可以为网站增添丰富的视觉体验提升用户交互感。