必须用 mask-image + background-color 组合而不能用 filter，因为 filter 作用于整个渲染盒，无法仅修改图标像素；mask-image 要求 PNG 图标为纯黑/白且背景全透明，否则遮罩不精准。
不能直接用 filter 替换颜色，必须用 mask-image + background-color 组合，且原始PNG必须是纯黑或纯白、背景全透明。
为什么 filter 不行
很多人试过 filter: hue-rotate() 或 invert()，结果发现整块元素（包括文字、边框、背景色）都被染色了。这是因为 filter 作用于整个渲染盒，不是“只改图”，它没有像素级选择能力。尤其当PNG作为 background-image 嵌入 input 或 div 时，你根本无法隔离图标区域。
常见错误现象：input { background: url(icon.png); filter: brightness(0) invert(1); } —— 输入框变黑、文字消失、placeholder也反转。
mask-image 的硬性前提
这个方案能工作的前提是：原始 PNG 必须满足两个条件，缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 图标主体是纯黑（
#000）或纯白（#fff），不能有灰阶过渡或彩色细节 - 背景必须是全透明（alpha = 0），不是“白色背景”或“浅灰底”
- 如果用 Sketch/Figma 导出，确认导出设置勾选了 “Transparent background”
- 用 Photoshop 保存时，务必选 PNG-24 + “Transparency”，并关闭“Convert to sRGB”以防色彩管理干扰 alpha 通道
一旦 PNG 含灰阶（比如抗锯齿边缘带半透灰），mask-image 就会把它当“部分遮罩”，导致颜色发灰、边缘糊、换色不干净。
实际写法与兼容性注意
核心写法只有三行，但顺序和取值很关键：
icon {
-webkit-mask-image: url(icon-black.png);
mask-image: url(icon-black.png);
background-color: #ff6b35;
}
说明：
-
-webkit-mask-image和mask-image必须同时写，Safari 旧版只认前者，Chrome/Firefox 现代版认后者 - URL 指向的是原始纯黑 PNG，不是“想要的颜色”——它只当遮罩用，不负责上色
-
background-color才是最终显示的颜色；可换成linear-gradient实现渐变图标 - 不要给该元素设
background-image，否则会和background-color叠加，破坏效果
兼容性底线：Chrome 79+、Firefox 70+、Safari 15.4+、Edge 102+。iOS Safari 15.4+ 起支持，低于此版本需降级为预处理 PNG。
输入框里用 mask-image 的典型结构
当图标要嵌在 input 左侧时，不能直接在 input 上设 mask-image（会覆盖文字），推荐用伪元素：
input {
padding-left: 32px;
position: relative;
}
input::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
-webkit-mask-image: url(user-icon.png);
mask-image: url(user-icon.png);
background-color: currentColor;
pointer-events: none;
}
要点：
- 用
currentColor让图标自动跟随文本色（比如暗色模式下自动变浅） -
pointer-events: none防止伪元素拦截光标点击 - 确保
input本身没设background-image，否则伪元素会被盖住
最易被忽略的一点：mask 图标尺寸必须和容器宽高严格匹配。如果 width/height 是 16px，但 PNG 内容实际只占 12px 且四周留白，mask 区域就会错位——建议导出时裁切到内容边界，或用 mask-size: contain 微调。
