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隔行变换色实现示例
Feb 19 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
几款流行的HTML5 UI框架比较(小结)
You might like
php实现Mysql简易操作类
2015/10/11 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
jQuery 入门讲解1
2009/04/15 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
vue slots 组件的组合/分发实例
2018/09/06 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python实现的科学计算器功能示例
2017/08/04 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
加油口号大全
2014/06/13 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年保管员工作总结
2015/04/30 职场文书
公司周年庆典致辞
2015/07/30 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
go 实现简易端口扫描的示例
2021/05/22 Golang
python 如何用terminal输入参数
2021/05/25 Python
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Python机器学习之决策树和随机森林
2021/07/15 Javascript