css3可以 改变 图片的颜色了。从此再也 不用 设计出多张图，而且随时可以修改。下面就 简单 介绍下css3中是如何 做到 改变背景图片的颜色效果的。
方式一 ： 利用 css3滤镜filter中的 drop -s hadow
代码如下：
<style>
.icon{
dis play : inline-block;
width: 180px;
h ei ght: 180px;
background: url(' img /XXX.png') no-re PE at center cover;
overflow: hidden;
}
.icon :after {
content: '';
display: block;
height: 100%;
transform: trans latex (-100%);
background: inher IT ;
filter: drop-shadow(144px 0 0 # fff); //需要修改的颜色值
}
</style>
<i class="icon"></i>
说明：
drop-shadow 滤镜可以给元素或图片非透明区域添加投影
将 背景透明 的 PNG 图标施加一个不带模糊的投影，就等同于生成了另外一个颜色的图标
再通过 overflow:hidden 和位移处理将原图标隐藏
mix-blend-mode 取值情况：【除了最后3个，大体和ps效果一样】
mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片叠底 mix-blend-mode: screen; // 滤色 mix-blend-mode: overlay; // 叠加 mix-blend-mode: darken; // 变暗 mix-blend-mode: lighten; // 变亮 mix-blend-mode: color-dodge; // 颜色减淡 mix-blend-mode: color-burn; // 颜色加深 mix-blend-mode: hard-light; // 强光 mix-blend-mode: soft-light; // 柔光 mix-blend-mode: difference; // 差值 mix-blend-mode: exclusion; // 排除 mix-blend-mode: hue; // 色相 mix-blend-mode: saturation; // 饱和度 mix-blend-mode: color; // 颜色 mix-blend-mode: luminosity; // 亮度 mix-blend-mode: initial; // 默认 mix-blend-mode: inherit; // 继承 mix-blend-mode: unset; // 还原
方式二 ：利用css3的mix-blend-mode 和 background-blend-mode
代码如下：
<style>
.icon{
display: inline-block;
width: 180px;
height: 180px;
background -i mage: url($'img/XXX.png'), linear-gra die nt(#f00, #f00);
background-blend-mode: lighten;
background-size : cover;
}
</style>
<i class="icon"></i>
说明：
lighten这个混合模式：变亮、变亮模式与变暗模式产生的效果相反，黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是 白色 。那就 应该 用变暗（darken）的混合模式&nbs p; 。
linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。
总结：
方式一局限于png格式的图片，方式二不限制图片的格式。
css3具有一定的兼容性。ch rom e、Firefo、移动端较为适合使用。
到此这篇关于css3实现背景图片颜色修改的多种方式的 文章 就介绍到这了,更多相关css3背景图片颜色修改内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 css3实现背景图片颜色修改的多种方式 全部内容，希望文章能够帮你解决 css3实现背景图片颜色修改的多种方式 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css3实现背景图片颜色修改的多种方式的详细内容...