在某天早晨,设计师给我提供了一张png的logo图,如下
这就是一张简单的png图片,只有当背景色为深色的时候 才能显示出 png上的图案,若是背景色为白色,则png上啥图案都显示不了。
今天用了一招让png图片变色成下面这样
代码实现
html
less
.icon {
overflow: hidden;
display: inline-block;
position: relative;
width: 107px;
height: 21px;
.iconDel {
background: url('../assets/nav_icon_logo_nor@3x.png') no-repeat;
background-size: 107px 21px;
width: 107px;
height: 21px;
display: inline-block;
-webkit-filter: drop-shadow(107px 0 0 red);
filter: drop-shadow(107px 0 0 red);
position: relative;
left: -107px;
}
}
复制代码
以上代码即可实现png变色;
核心
采取了filter属性,shadow向右107px 并加了red颜色,所以shadow 是右边107px位置,再把iconDel向左边偏移107px,让阴影位置在中心位置,父容器设置了overflow:hidden,所以只显示阴影内容。所以最后看到的红色,只是原图片的阴影。
兼容性
不支持ie11,如果是内部管理平台使用,可以直接用这套方法,减少图片的夹在,减少流量,很试用于一些icon的颜色变化。如果是to c项目建议还是让设计师换一张红色图片吧。😂😂