contrast() 必须用纯数字如 contrast(1.5)，禁用百分比；父元素触发层叠上下文时需加 isolation: isolate；brightness 与 contrast 顺序影响效果，推荐 brightness→contrast→saturate→grayscale；filter 对 background-image 无效。
直接用 filter: contrast()，别写百分比
绝大多数人第一次写 contrast() 时会写成 contrast(150%)，结果在 Safari 或某些 Android WebView 里失效或变灰块。必须写纯数字：contrast(1.5) 才可靠。contrast(1) 是原始对比度，contrast(0) 是纯灰（不是黑），contrast(0.01) 比 contrast(0) 更安全——尤其旧版 Safari 渲染 contrast(0) 容易出错。
img 上加 filter 会被父容器“吃掉”？加 isolation: isolate
如果你给 <img alt="HTML怎么做图片对比度调节_html CSS图片对比度contrast调节【必看】" > 直接设了 filter: contrast(1.3)，但页面没反应，大概率是父元素触发了层叠上下文（比如有 opacity: 0.99、transform: translateZ(0) 或 will-change: transform），导致滤镜被截断。最简单解法：套一层 <div> 包住图片，并在该 <code><div> 上加 <code>isolation: isolate。不需要改 JS，也不用动图片本身。
和 brightness() 一起用，顺序很重要
写 filter: brightness(0.8) contrast(1.4) 和 filter: contrast(1.4) brightness(0.8) 效果不同——前者先压暗再拉对比，容易保留暗部细节；后者先拉对比再压暗，可能让阴影直接死黑。推荐固定顺序：brightness → contrast → saturate → grayscale。调试时逐个注释掉某个函数，比靠猜快得多。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
背景图不能用 contrast()，别白费劲
filter 只对渲染为独立元素的 <img alt="HTML怎么做图片对比度调节_html CSS图片对比度contrast调节【必看】" > 生效，对 CSS 的 background-image 完全无效。你写 div { background-image: url(...); filter: contrast(1.2); } 不会起任何作用。要处理背景图的对比度，要么换用 <img alt="HTML怎么做图片对比度调节_html CSS图片对比度contrast调节【必看】" > + position: absolute 模拟，要么用 Canvas 动态生成，或者接受它不支持的事实。
立即学习“前端免费学习笔记（深入）”；
