最稳妥写法是用包裹容器加 isolation: isolate；contrast() 和 brightness() 参数为数字或百分比，顺序影响效果，建议 brightness→contrast；图片模糊因GPU合成层子像素渲染降级，需偶数尺寸和避免多层滤镜。
filter 的 contrast() 和 brightness() 怎么写才生效
直接写 filter: contrast(1.2) brightness(1.1) 多数情况下能工作，但容易被父元素的 transform、will-change 或某些 CSS 层叠上下文（如 opacity ）意外截断滤镜效果。最稳妥的方式是给图片加一层包裹容器，并在该容器上设 isolation: isolate。
-
contrast()接受数字或百分比：1 是原始对比度，0 完全灰白，超过 1 增强；contrast(0.8)和contrast(80%)等价 -
brightness()同理：1 是原始亮度，0 完全黑，2 是两倍亮度；注意brightness(0)不等于隐藏图片，它仍占布局空间且可交互 - 两个函数顺序有影响：先调亮再增强对比，和先增强对比再调亮，视觉结果不同，建议按“亮度→对比度”逻辑组织
为什么图片变模糊或边缘发虚
这是 filter 在部分浏览器（尤其是旧版 Safari 和 Chrome 低版本）中触发了子像素渲染降级导致的。根本原因是滤镜让浏览器启用了 GPU 合成层，而该层对非整数尺寸缩放不友好。
- 确保图片宽高是偶数像素（尤其用
object-fit: cover时），避免小数计算 - 加
image-rendering: -webkit-optimize-contrast对 Safari 有帮助，但仅限于contrast()单独使用时 - 避免同时叠加过多滤镜（比如
blur(1px) contrast(1.3) brightness(1.05)），三层以上易触发渲染异常
filter 在 img 标签和背景图上的行为差异
filter，但 CSS 背景图（background-image）不支持——你不能对 div 的背景图单独加 contrast()。想实现类似效果，得用伪元素 + filter 模拟：
div {
background-image: url("photo.jpg");
position: relative;
}
div::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
filter: contrast(1.4) brightness(0.95);
z-index: -1;
}
- 伪元素必须显式设
background: inherit才能复用父容器的背景图 -
z-index: -1是关键，否则伪元素会遮挡内容 - 这种方式无法响应
background-size: contain的自适应缩放，需额外用background-size和transform: scale()配合
兼容性与性能要注意的硬伤
IE 完全不支持 filter（包括 contrast 和 brightness），Edge 17+ 开始支持，但 iOS Safari 9.3–13.1 对复合滤镜（多个函数连用）存在闪烁或失效问题。
- 如果要保 IE，只能用 SVG 滤镜或 Canvas 手动处理，成本极高，一般项目直接放弃
- 大量图片同时加
filter会显著增加合成层压力，滚动卡顿常见于移动端；建议用will-change: filter提前提示，但仅在真正需要动画时启用 -
filter无法通过 JavaScript 动态读取当前值（getComputedStyle(el).filter返回字符串，解析困难），所以做渐变控制时，别依赖实时读取，改用状态变量管理
实际项目里，最常被忽略的是父容器的 overflow: hidden 和 filter 的组合——一旦父容器裁剪了子元素，滤镜的高斯扩散（哪怕没写 blur）也可能被意外截断，边缘出现生硬过渡。这时候要么去掉 overflow，要么给滤镜元素加点 margin 留出余量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
