css 改变图片的背景色,css3实现背景图片颜色修改的多种方式
css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。
方式一:利用css3滤镜filter中的 drop-shadow
代码如下:
.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); //需要修改的颜色值
}
说明:
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
代码如下:
.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;
}
pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html
说明:
lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式 。
linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。
总结:
方式一局限于png格式的图片,方式二不限制图片的格式。
css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。
css 改变图片的背景色,css3实现背景图片颜色修改的多种方式相关推荐
- css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明 内容不透明 最常见的做法事设置元素的opacity,这种设置 ...
- 黑马程序员前端-CSS背景:颜色、图片、平铺、背景图片位置、背景图像
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- CSS3 background-clip背景裁剪、CSS3 background-origin背景图片起点
background-clip属性指定背景绘制区域.指定显示背景的范围. 设置裁剪区域后,只有落到裁剪区域内的内容会被显示,而落到裁剪区域外的内容不会被显示出来. background-clip属性 ...
- html改变复选框颜色,如何利用纯CSS改变html?radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
- css如何设置背景图片?background属性添加背景图片
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- 巧妙的有css合并图片解决tab切换的背景图片
巧妙的有css合并图片解决tab切换的背景图片 有时候做tab切换的时候 会碰到下面的这种情况 我截个图过来看看 tab切换 打开页面时候 茶庄介绍 及鼠标移上去时候 是上面这样的效果 当鼠标移下 ...
- html给背景图片加遮罩,科技常识:css3给背景图片加颜色遮罩的方法
今天小编跟大家讲解下有关css3给背景图片加颜色遮罩的方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css3给背景图片加颜色遮罩的方法 的相关资料,希望小伙伴们看了有所帮助. 前段时 ...
- .net的label的背景如何设置成为透明_css如何设置背景图片?background属性添加背景图片...
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
- 设置背景图片,解决手机上背景图片高度适应问题
设置背景图片,解决手机上背景图片高度适应问题 第一种方法:直接对图片进行设置,代码如下 <img src="url" class="PhoneBack"& ...
最新文章
- /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found的解决办法
- 网站输入正确账号密码页面刷新一下_Folx的密码管理保存网站登陆信息
- oracle触发器修改同一张表,oracle触发器中对同一张表进行更新再查询时,需加自制事务...
- Python入门教程之文件读写操作知识
- nusoap php 7,nusoap-用php的NuSoap 访问webservice遇到的问题。
- RHEL7 本地yum源配置
- 信息论常见概念:熵、互信息、KL散度和信息增益
- sysbench压力工具报错:
- AI软件制作莫比乌斯环
- 转载 网络上的8051 free IP core资源
- 十个最常用深度学习图像/视频数据标注工具
- 医药行业如何数字化转型 附医药行业数字化转型方案
- 33. Prometheus-报警-通知模板示例
- #51CTO学院四周年# 我和51cto的故事
- sqldbx mysql 乱码_sqlDbx连接mysql 及乱码
- python绘制动态k线及均线_Python绘制股票移动均线的实例
- Word中的字体大小(几号-几磅)【转】
- CStdioFile,CFile类,文本文件处理(MFC学习园地)
- 呦呦,这些代码有点臭,重构大法带你秀(SPI接口化),skr~
- 音视频开发基础知识(转载)