1.将红色和灰色的QQ图标放到一个PNG图片里,通过background-position、over:hidden来控制图标的展示。
2.将QQ图标制作成font字体,通过font-face引用字体,比如QQ图标对应者字母A,那我可以这样用:A
3.使用svg-filter滤镜对QQ图片上色,下面是一个svg的滤镜。
View Code把这个SVG保存到当地文件夹中,命名为filter-test.svg,如果图标想要换种颜色,很简单,css中加入代码:filter:url(filter-test.svg#a)-------------------注意:我的这份svg中只有一个id为a的滤镜。
总结下:第一种方式累设计师,图标图片会很大,CSS控制麻烦,如果是一个图集需要计算位移;第二种方式,简单但是效果有限,比如说打灯光、做渐变等等;第三种方式呢,很优秀,给图标添加样式,只需要制作一份svg滤镜集,然后通过filter应用就可以,占的资源少,兼容性呢,只要浏览器支持svg和filter即可。
就这些了,个人觉得最后一种方式渐渐会取代前面,因为它是滤镜,可以挂到网上复用,实现共享。