css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。' I0 ~; r* P6 k8 l+ t
方式一：利用css3滤镜filter中的 drop-shadow
7 E+ r& d- R3 h5 o; ]' q# Q; ~! @ 代码如下：. t* w3 s9 W1 O8 O; u4 Z( I3 V
- <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>
说明：# j/ d! N( _' S2 [8 ]1 _
drop-shadow 滤镜可以给元素或图片非透明区域添加投影，将背景透明的 PNG 图标施加一个不带模糊的投影，就等同于生成了另外一个颜色的图标，再通过 overflow:hidden 和位移处理将原图标隐藏。! v* d$ g! o/ g8 Q; S$ L
mix-blend-mode 取值情况：【除了最后3个，大体和ps效果一样】1 W! ^$ [( k* w- M& W; `
- 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-mode4 R: M: J, ~( S8 W8 l$ X
代码如下：
# r- q) y- W, ^8 v9 G- <style>
- .icon{
- display: inline-block;
- width: 180px;
- height: 180px;
- background-image: url(说明：
- lighten这个混合模式：变亮、变亮模式与变暗模式产生的效果相反，黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式 。
- linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。
- [b]总结：[/b]
- 方式一局限于png格式的图片，方式二不限制图片的格式。css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。
-
- img/XXX.png'), linear-gradient(#f00, #f00);
- background-blend-mode: lighten;
- background-size: cover;
- }
- </style>
- <i class="icon"></i>
说明：. m: k0 w' d3 Q) R
lighten这个混合模式：变亮、变亮模式与变暗模式产生的效果相反，黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式 。
( n" a4 E$ R% b- K* l. Y! x9 w5 k linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。
# {. y# Y9 q; X1 V0 W: V总结：1 l# |! Y5 R; j+ `$ E8 l9 P" b
方式一局限于png格式的图片，方式二不限制图片的格式。css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。
: {. x8 k( k/ t1 v( [( k | 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-4-14 17:05:35