CSS新手求教：如何在代码中修改白色PNG图片的颜色？

数据老陈

2026-6-25

如何修改白色PNG图片的颜色

针对你遇到的白色PNG改色问题，这里有几个可行的CSS解决方案：

方法1：组合使用CSS `filter` 函数

白色PNG的饱和度为0，单独用saturate()不会生效，需要组合多个filter函数来转换颜色。比如要把白色转为红色，可以这样写：

.todo-app h2 img {
    width: 150px;
    margin-left: 10px;
    /* 转换为红色的filter组合，可根据目标颜色调整参数 */
    filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(7495%) hue-rotate(359deg) brightness(96%) contrast(114%);
}

你可以通过颜色转filter的工具（本地或在线均可），输入目标颜色的十六进制/RGB值，直接生成对应的filter参数组合。

方法2：用 `mix-blend-mode` 配合父元素颜色

如果图片是无渐变的纯白色，这种方法更简单：给父元素设置目标颜色，再让图片和父元素颜色混合：

.todo-app h2 {
    /* 设置你想要的目标颜色 */
    color: #ff6347;
}
.todo-app h2 img {
    width: 150px;
    margin-left: 10px;
    mix-blend-mode: multiply;
    /* 确保图片是纯白色（如果原图有偏差） */
    filter: brightness(0) invert(1);
}

方法3：CSS遮罩（适合复杂形状）

如果图片形状复杂，用遮罩可以精准保留形状同时改色：

.todo-app h2 img {
    width: 150px;
    margin-left: 10px;
    /* 隐藏原图 */
    visibility: hidden;
}
.todo-app h2::after {
    content: '';
    display: inline-block;
    width: 150px;
    height: auto;
    margin-left: 10px;
    /* 设置目标颜色 */
    background-color: #3498db;
    /* 用原图作为遮罩，保留形状 */
    -webkit-mask: url('images/clock.png') no-repeat center/contain;
    mask: url('images/clock.png') no-repeat center/contain;
    vertical-align: middle;
}