你的位置:首页 > 网页设计

[网页设计]图标变色的方法


拿QQ图标来说事

1.将红色和灰色的QQ图标放到一个PNG图片里,通过background-position、over:hidden来控制图标的展示。

2.将QQ图标制作成font字体,通过font-face引用字体,比如QQ图标对应者字母A,那我可以这样用:<span >A</span>

3.使用svg-filter滤镜对QQ图片上色,下面是一个svg的滤镜。

<svg ="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><defs><filter id="a" color-interpolation-filters="sRGB"><feComposite in2="SourceGraphic" operator="arithmetic" k2="1" result="composite1"/><feColorMatrix in="composite1" values="1" type="saturate" result="colormatrix1"/><feFlood flood-opacity="1" flood-color="#3A9E00" result="flood1"/><feBlend in="flood1" in2="colormatrix1" mode="multiply" result="blend1"/><feBlend in2="blend1" mode="screen" result="blend2"/><feColorMatrix in="blend2" values="1" type="saturate" result="colormatrix2"/><feComposite in="colormatrix2" in2="SourceGraphic" operator="in" result="fbSourceGraphic"/><feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feComposite in2="fbSourceGraphic" operator="arithmetic" k2="1" result="composite1" in="fbSourceGraphic"/><feColorMatrix in="composite1" values="1" type="saturate" result="colormatrix1"/><feFlood flood-opacity="1" flood-color="#3A9E00" result="flood1"/><feBlend in2="colormatrix1" in="flood1" mode="multiply" result="blend1"/><feBlend in2="blend1" mode="screen" result="blend2"/><feColorMatrix in="blend2" values="1" type="saturate" result="colormatrix2"/><feComposite in2="fbSourceGraphic" in="colormatrix2" operator="in" result="composite2"/></filter></defs><ellipse cx="310.637" cy="460.673" rx="162.715" ry="154.262" transform="matrix(.38065 0 0 .4103 -38.244 -109.02)" fill="#d3d7cf" stroke="#2e3436" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".571" filter="url(#a)"/></svg>

把这个SVG保存到当地文件夹中,命名为filter-test.svg,如果图标想要换种颜色,很简单,css中加入代码:filter:url(filter-test.svg#a)-------------------注意:我的这份svg中只有一个id为a的滤镜。

  总结下:第一种方式累设计师,图标图片会很大,CSS控制麻烦,如果是一个图集需要计算位移;第二种方式,简单但是效果有限,比如说打灯光、做渐变等等;第三种方式呢,很优秀,给图标添加样式,只需要制作一份svg滤镜集,然后通过filter应用就可以,占的资源少,兼容性呢,只要浏览器支持svg和filter即可。

  就这些了,个人觉得最后一种方式渐渐会取代前面,因为它是滤镜,可以挂到网上复用,实现共享。