css3渐变背景教程(css3实现背景图片颜色修改的多种方式)
类别:Web前端 浏览量:1389
时间:2021-11-08 14:04:50 css3渐变背景教程
css3实现背景图片颜色修改的多种方式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背景图片颜色修改内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css3动画效果图(CSS3 三维变形实现立体方块特效源码)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- css3定义自定义字体(CSS3字体效果的设置方法小结)
- css3设置元素的边框图像(详解CSS3 用border写 空心三角箭头 两种写法)
- css3常用特性(css3学习之2D转换功能详解)
- css3基础选择器有哪些(对CSS3选择器的研究详解)
- css3设置字体阴影(简单掌握CSS3将文字描边及填充文字颜色的方法)
- 怎么用css3画椭圆(用CSS3画一个爱心)
- css flex布局教程(详解CSS3伸缩布局盒模型Flex布局)
- css3引导动画教程(详解Css3新特性应用之过渡与动画)
- css3导航菜单(CSS3实现的侧滑菜单)
- css3水平移动效果(利用css3 translate完美实现表头固定效果)
- css3动画效果怎么调(CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
热门推荐
- jquery 实现对联广告
- python中统计一个字符出现的次数(Python统计一个字符串中每个字符出现了多少次的方法字符串转换为列表再统计)
- python数字图像处理入门(python图像处理入门一)
- html5做app流程(Html5嵌入钉钉的实现示例)
- php语法基础知识(PHP中16个高危函数整理)
- laravel数据返回格式(laravel 关联关系遍历数组的例子)
- laravel模型使用技巧(提高Laravel应用性能方法详解)
- C#中的属性、和字段的区别
- sql server信息管理案例(利用SQL Server数据库邮件服务实现监控和预警)
- mysql必背知识点高级(MySQL 8.0 Online DDL快速加列的相关总结)