css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。
8 A( D4 X( Y0 F, _方式一:利用css3滤镜filter中的 drop-shadow, ^8 H+ k0 l; G: B! F. k7 [
代码如下:% t0 K6 J/ e' Y# ^2 ^) d
<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> 说明:
# E, ]) V/ w$ _* j1 M" z drop-shadow 滤镜可以给元素或图片非透明区域添加投影,将背景透明的 PNG 图标施加一个不带模糊的投影,就等同于生成了另外一个颜色的图标,再通过 overflow:hidden 和位移处理将原图标隐藏。
) N) ?" u! b# \ s* q8 v% p) G mix-blend-mode 取值情况:【除了最后3个,大体和ps效果一样】/ z2 O3 L6 F# I. N3 z2 Q
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& K. N6 X4 m* \5 `
代码如下:7 o. S% V6 A" N: G4 O! D
<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> 说明:+ p4 P: G2 n! Q% k6 [& T w; O
lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式 。# E9 J1 R" Q4 ]) h' l2 ^
linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。
# l/ M9 a5 S0 Q6 b3 D) U( _; m总结:1 P: x: a* _7 N3 x
方式一局限于png格式的图片,方式二不限制图片的格式。css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。7 ]+ l1 {( l4 Z: H7 c
|