CSS的filter属性怎么添加图像滤镜？

使用CSS的filter属性添加图像滤镜，只需为目标元素指定filter属性并设置一个或多个滤镜函数即可。具体操作如下：

• 语法结构在CSS规则中，通过filter属性定义滤镜效果，多个滤镜函数用空格分隔，浏览器按顺序依次执行。例如：

  img { filter: blur(5px) grayscale(50%); /* 先模糊5像素，再转为50%灰度 */}

• 常用滤镜函数及效果

  模糊效果：blur(radius)参数radius定义模糊程度（如blur(10px)），适用于背景虚化或毛玻璃效果。

  .hero-background { filter: blur(8px); }

  亮度调整：brightness(amount)1为原始亮度，<1变暗（如brightness(0.5)），>1变亮（如brightness(1.5)），常用于悬停交互反馈。

  .product-image:hover { filter: brightness(1.1); }

  对比度调整：contrast(amount)1为原始对比度，contrast(2)增强对比，contrast(0.5)降低对比，适合复古风格设计。

  .vintage-photo { filter: contrast(1.8); }

  灰度化：grayscale(amount)0为彩色，1（或100%）为完全灰度，用于“未激活”状态或老照片效果。

  .inactive-icon { filter: grayscale(100%); }

  色相旋转：hue-rotate(angle)参数angle以度（deg）为单位，旋转色轮颜色（如hue-rotate(90deg)改变主色调）。

  .mood-changer { filter: hue-rotate(90deg); }

  饱和度调整：saturate(amount)1为原始饱和度，>1更鲜艳（如saturate(1.5)），<1更灰暗，适合突出颜色纯度。

  .vibrant-thumbnail { filter: saturate(1.5); }

  老照片效果：sepia(amount)0为彩色，1（或100%）为深褐色，模拟复古照片。

  .old-paper { filter: sepia(100%); }

  阴影添加：drop-shadow(h-shadow v-shadow blur-radius spread-radius color)类似box-shadow，但仅作用于元素内容的不透明部分（如PNG透明区域无阴影），适合不规则图形。

  .custom-shape { filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); }

• 组合使用滤镜通过空格分隔多个滤镜函数，实现复杂效果。例如，让已售罄产品图片暗淡、模糊并带灰度：

  .sold-out-product-image { filter: grayscale(80%) brightness(50%) blur(3px); transition: filter 0.3s ease-in-out; /* 添加过渡效果 */}

  注意：滤镜顺序可能影响最终效果（如先模糊再灰度与先灰度再模糊的细微差异），且复杂滤镜链可能降低性能。

• 性能与兼容性注意事项

  兼容性：现代浏览器（Chrome、Firefox、Safari、Edge）支持良好，但IE不支持。需兼容IE时，可考虑SVG滤镜或直接处理图片。

  性能优化：

  避免对大尺寸元素或大量元素应用复杂滤镜链。

  优先使用GPU加速的滤镜（浏览器自动处理，但部分操作仍依赖CPU）。

  动画或过渡时简化滤镜效果，控制频率和时长。

  慎用will-change: filter;，虽可提示浏览器优化，但可能增加内存消耗。

  backdrop-filter差异：该属性作用于元素背后内容（如毛玻璃导航栏模糊下方内容），兼容性略差于filter（尤其Firefox需注意）。

通过合理运用filter属性，可实现非破坏性的动态视觉效果，但需兼顾性能与兼容性以提升用户体验。