登录 注册

纯CSS给PNG图标变色

本文参考文章:http://www.zhangxinxu.com/wordpress/?p=5429


这样一个图标,我们可以使用纯CSS将他变成任意颜色

那么原理是怎样呢?实际上是利用了CSS3滤镜中的投影。我们先看源码

HTML部分非常简单

<div class="outer">
<div class="icon"></div>
</div>
CSS部分:

.icon{
	background:url(图片URL) no-repeat center;
	width:20px;
	height:20px;
	position:absolute;
	left:0px;
	top:0px;
	border-left:20px transparent solid;
	-webkit-filter:drop-shadow(red -20px 0);
	filter:drop-shadow(red -20px 0);  
}
.outer{
	width:20px;
	height:20px;
	position:relative;
	overflow:hidden;
}
可以看到,实际上最关键的地方在于:

position:absolute;
left:0px;
top:0px;
border-left:20px transparent solid;
-webkit-filter:drop-shadow(red -20px 0);
filter:drop-shadow(red -20px 0);  
前三行,意思即为绝对定位,加上第四行以后效果就是让.icon在正常区域内不可见了。然后第五第六行只是CSS-HAWK,都是使用filter,将原来的div向左投影,同时投影的颜色为红色。这样的话,只要把原来的div用overflow隐藏,那么看上去就像是图标变色了一样。

但是有人会问了,加这个border有什么意义呢?实际上是这样的,如果不加border就进行测试的话,会发现在FF下正常,但是在webkit内核中就无法显示。原因在于,webkit内核规定如果原div不可见,那么投影也不可见。而加了border以后,原div就可以“可见”了,只不过可见部分只是一个隐藏的border而已,这样的话,他的投影也就同时可见了。

2016
06 19
上一篇
Older
下一篇
Newer
评论
0
点击
2852
发布
我是标题
我是文字
我是标题
我是文字
用户名
密码
用户名
密码
重复密码
努力的加载中.....