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怎么改变图片颜色相关推荐
- html怎么改变图片整体大小,css怎么改变图片大小?
css怎么改变图片大小?下面本篇文章就来给大家介绍一下使用css改变图片大小的方法,希望对大家有所帮助. 在HTML页面中,图片的显示方法有两种,分别为:img图片,background(背景)图片. ...
- html怎么改变图片亮度,纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色 说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
- html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
- CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
- css显示内容越来越模糊_纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...
说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色.或者是hover的时候,对图片的对比度, ...
- css怎么分开背景图片,css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
- html语言怎么排列图片,css怎么让图片横着排列?
css怎么让图片横着排列?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css让图片横着排列 方法:首先创建一个div来包裹所有的图片:然后隐藏外层di ...
- php header()改变图片尺寸,PHP改变图片的尺寸大小方法实例
本文主要和大家分享,PHP改变图片的尺寸大小方法实例,希望能帮助到大家. 改变图片的尺寸是一个很常见的功能需求,下面开始研究下关于PHP改变图片尺寸的方法.先介绍一个自己写的函数.01<?php ...
- html如何拉伸一个图片,css怎么拉伸图片?
css可以使用background-size属性设置图片拉伸,background-size属性规定背景图像的尺寸.此属性可以使用数值.百分比.cover等设置图片拉伸. background-siz ...
最新文章
- .NET chart 毫秒级坐标轴
- 恭喜我的同事丁宇入选年度 IT 领军人物
- linux pcl 转图片,PCL转图片工具Mgosoft PCL To Image Converter
- js中的可变参数arguments与json
- goland go test 多个文件_这个代码怎么会编译不通过?Goland 新手常见问题解决:GOPATH 和 Go Modules 编译不成功...
- 快速上手sqlserver profiler
- 受保护的属性无法直接读取
- LoadRunner参数化时的各个选项说明
- html中searchbutton点击没有反应,点击按钮加载完整的HTML后,使用Selenium加载其他元素...
- Spring Boot:(三)开发Web应用之Thymeleaf篇
- c语言 static变量和函数
- 华为OJ题目 -- 初级篇(机试OJ平台)
- linux batch date,BatchDate官方版
- 区块链-公钥生成地址
- Adams_2019_x64
- Win11谷歌的IDM插件用不了怎么解决?如何解决win11idm插件问题
- 北京大学肖臻老师《区块链技术与应用》公开课笔记-BTC
- vs2010c语言一闪而过,[转载]关于vs2010运行C程序时,运行结果窗口一闪而过的问题...
- 计算机管理员已禁用了teredo,Win7提示设备管理器中出现叹号设备“Teredo tunneling pseudo-interface”...
- 快速让网站内容可以复制
热门文章
- zlib-Deflate压缩算法
- 会利用信息差赚钱的人才是聪明人
- Windows实现开机自动登录(Windows免密登陆)
- 「机械」30个有趣的机械动图
- Logitech pro wireless GPW狗屁王 适配苹果电脑 Mac
- php前端工程师岗位职责,【前端软件工程师工作内容|工作职责|前端软件工程师做什么】-看准网...
- oracle rman备份时间点,Oracle Rman 控制RMAN的备份时间,减少IO消耗
- 失恋诗与失恋——《写情》唐·李益 // 一些失恋诗词
- 解决iOS版抖音破解重签名后无法安装
- 整理与总结:琼斯矢量和琼斯矩阵