html中改变一张图片的颜色,css怎么改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面就来说说怎么用简单的css改变图片的颜色。
熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix-blend-mode 和 background-blend-mode
首先我们来了解一下mix-blend-mode 取值情况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; // 还原
这些大致和ps中一致,除了最后三个。
background-blend-mode 这个是背景的混合模式。这个可以是背景图片间的混合,也可以是背景图片和背景颜色的混合。
现在我们使用 background-blend-mode: lighten 实现任意图片颜色赋色技术吧。(相关课程推荐:css视频教程)
假设我们有这样一张图片,JPG、PNG、GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色:
利用background-blend-mode,我们可以在图片下叠加多一层其他颜色,通过background-blend-mode: lighten这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。简单的 CSS 代码示意如下:.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}
效果如下:
注意,上面
CSS 这一句是关键 background-image: url($img), linear-gradient(#f00,#f00);,这里我叠加了一层渐变层linear-gradient(#f00, #f00),实现了一个纯红色背景,而不是直接使用 #f00
实现红色背景。
现在解释一下lighten这个混合模式。变亮,变亮模式与变暗模式产生的效果相反:
1、 用黑色合成图像时无作用,用白色时则仍为白色。
2、 黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式。
本文来自css3答疑栏目,欢迎学习!
html中改变一张图片的颜色,css怎么改变图片颜色相关推荐
- 利用几种颜色量化方法提取图片颜色色调
利用几种颜色量化方法提取图片颜色色调 利用几种颜色量化方法提取图片颜色色调 1 k-means方法(在RGB空间) 2 k-means方法(Lab颜色空间) 3 最小方差量化方法rgb2ind() 4 ...
- 颜色量化 matlab,利用几种颜色量化方法提取图片颜色色调
利用几种颜色量化方法提取图片颜色色调 这里主要用3种方法:包含两种k-means方法和一种matlab自带的最小方差量化方法. 为了方便对比,文中选用梵高的星空(The Starry Night)作为 ...
- css怎么设置列表颜色,css怎么设置table颜色
css设置table颜色的方法:首先找到并打开需要设置的table代码内容:然后通过color属性设置表格中文字的颜色:最后通过background属性设置表格的背景颜色即可. 本文操作环境:wind ...
- 技巧分享:如何利用CSS属性修改图片颜色?
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...
- css的font修改颜色,css的font字体颜色如何设置
css的font字体颜色设置方法:1.直接在标签上使用"color:颜色"设置字体颜色:2.通过给font标签添加class属性,在css标签中通过该class设置字体颜色. 本教 ...
- html设置顶部背景颜色,css怎么设置背景颜色?
css怎么设置背景颜色?下面本篇文章就来给大家介绍一下使用CSS设置背景颜色的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用background-colo ...
- 前端技巧|利用CSS属性修改图片颜色
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...
- html css怎么换字体颜色,css怎么设置字体颜色?
在html中我们经常要用到css样式来美化html标签的一些不足之处,例如字体颜色.下面本篇文章就来给大家介绍一下使用CSS设置字体颜色的方法,希望对大家有所帮助. 在CSS中,我们可以通color属 ...
- html css超链接字体颜色,css如何定义字体颜色
css定义字体颜色的方法:1.在文字所在标签中直接使用css样式设置颜色即可.2.在文字所在标签中使用id或class引入css字体颜色样式. css设置字体颜色的方法: 1.标签内设置CSS字体颜色 ...
- php生成图片颜色失真,Coreldraw导出图片颜色失真怎么办?
CorelDRAW用来画矢量图是很好用的了,不过你会发现你导入ps或者ai制作的图片时,颜色会偏差很多,这是因为CorelDRAW的颜色模式是CKMY的原因.不过你简单的把CKMY模式改成RGB模式, ...
最新文章
- oracle 复制 mysql_MySQL与Oracle之间互相拷贝数据的Java程序
- android studio 编译报错:download fastutil-7.2.0.jar
- 【Oracle】ORA 01810 格式代码出现两次-转
- Android开发者必备:推荐一款助力开发的开源APP
- 8.程序什么时候应该使用线程,什么时候单线程效率高?
- C/Cpp / #include
- 想要转人工智能,程序员该如何学习?(学习路线、知识体系)
- 让你的git bash更好看更实用
- 【Flink】Flink 写入 MySQL主键冲突 默认Upsert策略
- python删除列表第几个元素_python中对列表list遍历的过程中删除元素4种方法
- 三星s3android wear,三星galaxy wearable下载
- Linux高级编程--06.进程概述
- 【每日算法Day 90】5种方法:求解数组中出现次数超过一半的那个数
- 管理者要会讲的六十八个故事
- 两个向量的夹角公式_向量的夹角公式!急急急!!!
- 宏基ACER E1-471G拆机心得及注意事项
- Mac系统新建txt文本文件技巧
- 番外篇:常见安全漏洞及解决方案
- 怎么更换电脑的默认浏览器?
- java里创建一个长方形类_定义一个长方形类,定义 求周长和面积的方法实例
热门文章
- 短信API接口怎么调用
- 3D引擎优化: 分布式渲染系统能聚沙成塔
- excel打不开html格式的文件,excel文件打不开提示格式无效怎么解决【图文】
- 【图像修复】论文阅读笔记 ----- 《Image inpainting based on deep learning: A review》
- python 基础知识
- 手把手教你获取一年免费通配符泛域名SSL证书
- 暗影崛起 黑石山 英雄难度 科林酒吧
- 百度安全实验室提醒您:连接千万条,安全第一条;加密不认证,亲人两行泪。...
- Win10桌面背景消失了变黑的解决方法
- 使用poi解析word转html,并处理word中图片