css3实现背景图片颜色修改的多种方式
发布时间：2021-04-13 11:57:58 作者：前端一点红 
我要评论
我要评论这篇文章主要介绍了css3实现背景图片颜色修改的多种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。
方式一：利用css3滤镜filter中的 drop-shadow
代码如下：
<style>
.icon{
display: inline-block;
width: 180px;
height: 180px;
background: url('?css/img/XXX.png') no-repeat center cover;
overflow: hidden;
}
.icon:after{
content: '';
display: block;
height: 100%;
transform: translateX(-100%);
background: inherit;
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-image: url($'?css/img/XXX.png'), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}
</style>
<i class="icon"></i>
说明：
lighten这个混合模式：变亮、变亮模式与变暗模式产生的效果相反，黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式 。
linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。
总结：
方式一局限于png格式的图片，方式二不限制图片的格式。
css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。
到此这篇关于css3实现背景图片颜色修改的多种方式的文章就介绍到这了,更多相关css3背景图片颜色修改内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-29- 这篇文章主要介绍了CSS3只让背景图片旋转180度的实现示例。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2021-03-09
前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法，感兴趣的朋友跟随小编一起看看吧2019-11-05
css3实现一个div设置多张背景图片及background-image属性实例演示
这篇文章主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下2017-08-10CSS的background属性及CSS3的背景图片设置总结
这篇文章主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下2016-06-13- 这篇文章主要介绍了CSS3对背景图片的裁剪及尺寸和位置的设定方法,在IE浏览器中要注意一下兼容性,需要的朋友可以参考下2016-03-07
- CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y2014-04-04
- 使用css3 属性：background-size可以轻松实现像桌面壁纸一样拉伸，下面为大家详细介绍下具体的相关实现过程，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-19
css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友2013-01-08- 背景图片/纹理有很多种使用方式，常常用于为添加网站的最佳的界面美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果,需要的朋友可以了解2012-12-19
最新评论