css3实现背景图片颜色修改的多种方式


Posted in HTML / CSS onApril 13, 2021

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

方式一:利用css3滤镜filter中的 drop-shadow

代码如下:

<style>
.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background: url('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($'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背景图片颜色修改内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
几款流行的HTML5 UI框架比较(小结)
You might like
PHPCMS的使用小结
2010/09/20 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php实现RSA加密类实例
2015/03/26 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
用jquery来定位
2007/02/20 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python生成密码字典的方法
2018/07/06 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
介绍一下linux的文件权限
2014/07/20 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
移动通信行业实习自我鉴定
2013/09/28 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
入党介绍人意见2015
2015/06/01 职场文书
货款欠条范本
2015/07/03 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
python requests模块的使用示例
2021/04/07 Python
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Python中requests库的用法详解
2022/06/05 Python