纯css无法对图片局部加filter，需用clip-path切出区域并叠加带滤镜的同源图层；必须用百分比坐标适配响应式，推荐brightness(1.3) contrast(1.2)组合，避免过度使用blur或hue-rotate。
用 clip-path 配合 filter 实现局部滤镜
纯 CSS 无法直接对图片某一块区域单独加 filter，因为 filter 作用于整个元素。但可以靠 clip-path 切出目标区域，再用绝对定位把带滤镜的图层“盖”上去——本质是视觉叠加，不是真正在原图上抠局部滤镜。
常见错误是直接给 <img> 加 clip-path 后套 filter，结果整张图都被裁剪+滤镜，而不是“只滤镜一部分”。正确做法是准备两张图：一张原图（无滤镜、全显示），一张同源图（仅显示要突出的区域 + 滤镜）。
- 用
clip-path: polygon(...)精确框出你想突出的区域，比如人脸、按钮、文字块 - 第二张图用
position: absolute叠在原图上，z-index: 1 - 确保两张图尺寸、缩放、位移完全一致，否则边缘会错位
- 注意
clip-path的坐标基于元素盒模型，百分比值更易适配响应式
filter 值别乱堆，重点用 brightness() 和 contrast()
想“突出”，不是加模糊或灰度，而是让局部更亮、更锐利、色彩更饱和。过度使用 blur() 或 hue-rotate() 容易失真，反而削弱焦点。
实际调试中，brightness(1.3) contrast(1.2) 组合最稳妥；若背景暗，可加 saturate(1.25) 提气。避免写 filter: drop-shadow(...) brightness(...) contrast(...) 这种长链——浏览器重绘开销明显上升，尤其在滚动时掉帧。
-
brightness()超过1.4容易过曝，细节丢失 -
contrast()超过1.3会让噪点变明显，老图慎用 - 别用
filter: url(#svg-filter)，兼容性差且调试困难
响应式下 clip-path 坐标容易偏移
用像素值写 clip-path: polygon(100px 50px, ...) 在缩放或换设备时必然错位。必须用百分比，且基准要统一。
最省事的方式：把图片包进一个 position: relative 的容器，两张图都设为 width: 100%; height: auto;，再用 clip-path: polygon(30% 20%, 70% 20%, 70% 40%, 30% 40%) 这类相对坐标。这样无论容器多宽，裁剪区域始终占图宽高的固定比例。
- 别依赖开发者工具里“复制 clip-path”功能，它常输出 px 值
- 如果图片有
object-fit: cover，clip-path仍按原始宽高比计算，需手动换算比例 - 移动端 Safari 对
clip-path的polygon()支持稳定，但path()不推荐用
替代方案：用 SVG <mask></mask> 更精准但更重
如果 clip-path 满足不了复杂形状（比如不规则手绘轮廓、带羽化边缘），就得切到 SVG <mask></mask>。它允许用渐变、透明度控制滤镜强度过渡，但代价是 HTML 变臃肿、CSS 失去动态控制力。
典型结构是：SVG 内定义 <mask id="spotlight"></mask>，里面用 <rect></rect> 或 <circle></circle> + fill-opacity 控制透光率，再把这张图作为 mask-image 应用到带滤镜的图层上。不过多数场景，clip-path + 百分比坐标已够用。
- SVG mask 的
mask-type: luminance在 Chrome 中默认开启，但 Firefox 需显式声明 - 不要把整段 SVG 写进 CSS 的
url("data:image/svg+xml,...")，编码易错且不可维护 - 真要用 mask，优先内联 SVG，避免额外 HTTP 请求拖慢首屏
真正难的不是写对那几行 CSS，而是反复调 clip-path 坐标和 filter 参数直到视觉平衡——人眼对亮度/对比度变化极其敏感，差 5% 就可能显得突兀或廉价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
