<picture> 标签本身不渲染图像，只是容器，滤镜必须作用于内部的 <img> 元素才生效；直接写在 <picture> 上会被忽略。
picture 标签里加 filter 为什么没效果？
因为 <picture> 本身不渲染图像，它只是个容器，真正渲染的是内部的 <img>。CSS 滤镜必须作用在 <img> 元素上才生效，直接写在 <picture> 上会被忽略。
常见错误写法：
<picture style="filter: contrast(1.2) saturate(1.3);"> <source srcset="card.webp" type="image/webp"> <img src="card.jpg" alt="卡片"> </picture>——这里
filter 完全不起作用。
正确做法是把样式加到 <img> 上，且需注意：滤镜会同时作用于所有 <source> 提供的图像资源，无需重复设置。
如何让不同分辨率图都保持一致的滤镜表现？
WebP、AVIF 等现代格式自带更宽色域和更高动态范围，而 filter 是在浏览器合成后对像素做处理，所以同一组 CSS 滤镜参数，在不同解码结果上视觉差异可能比预期大——尤其 saturate() 和 brightness()。
实操建议：
- 统一用 sRGB 色彩空间导出所有源图（包括 WebP/AVIF），避免浏览器自动做色彩校正干扰滤镜一致性
- 避免过度依赖
contrast()，它在暗部易失真；改用brightness()+saturation()组合更可控 - 若需精确控制，可对
<img>设置image-rendering: -webkit-optimize-contrast;（仅 Safari 有效，慎用）
响应式卡片中，滤镜随 viewport 变化怎么写？
不能靠 <picture> 的 media 属性切换滤镜（它只管资源选择），得用媒体查询作用于 <img> 元素本身。
立即学习“前端免费学习笔记（深入）”；
示例：卡片在小屏去色、大屏增强对比
<picture> <source media="(max-width: 768px)" srcset="card-small.webp"> <source srcset="card-large.webp"> <img src="card.jpg" alt="卡片" class="card-img"> </picture>
.card-img {
filter: brightness(1.1) saturate(0.9);
}
@media (max-width: 768px) {
.card-img {
filter: grayscale(1) brightness(0.95);
}
}注意：滤镜会叠加，不要在父容器再设 filter，否则触发两次渲染，导致性能下降或意外混合。
滤镜卡顿或闪烁的常见原因
多数发生在滚动或 hover 动画中，核心问题是浏览器把带滤镜的 <img> 当作“复杂层”，频繁重绘引发掉帧。
关键排查点：
- 是否在
transform或opacity动画中同时修改filter？这会强制每帧重绘像素，应避免——改用will-change: filter;前置提示（但仅在必要时） -
<img>是否未设宽高？缺失尺寸会导致 layout 波动，连带滤镜重计算 - 是否用了
blur()？它是最耗性能的滤镜，移动端慎用；如必须，限制半径 ≤ 2px，并搭配backface-visibility: hidden;
blur(4px) 的卡片图在 iOS Safari 上可能直接禁用硬件加速，这点容易被忽略。 
