一、CSS3 mask
CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。
效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img { width: 60px; height: 60px; } .colorful { display: inline-block; width: 60px; height: 60px; background: linear-gradient(to right, red, yellow, green); background-size: 80%; -webkit-mask: url(img/snowflake.png) no-repeat; -webkit-mask-size: 100% 100%; mask: url(img/snowflake.png) no-repeat; mask-size: 100% 100%; } </style> </head> <body> <h4>原图</h4> <p><img src="img/snowflake.png"></p> <h4>变成指定红色</h4> <p><span class="colorful"></span></p> </body> </html>
效果图片
二、css background-blend-mode
此方法图片必须是黑图白底，如果是彩色的，颜色会混淆在一起；其次非图形部分必须是白色，不能是透明，因为透明会被当做黑色处理。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img { width: 60px; height: 60px; } .colorful { display: inline-block; width: 60px; height: 60px; background:url(img/snowflake1.jpg) no-repeat, linear-gradient(to right, red, yellow, green) ; background-size:cover; background-blend-mode: lighten; } </style> </head> <body> <h4>原图</h4> <p><img src="img/snowflake.png"></p> <h4>变成指定红色</h4> <p><span class="colorful"></span></p> </body> </html>
效果
三、css滤镜drop-shadow
使用了CSS3滤镜filter中的drop-shadow(drop-shadow滤镜可以给元素或图片非透明区域添加投影）。用drop-shadow添加投影模糊度为0,再隐藏原图片。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .wrap { width: 60px; height: 60px; overflow: hidden; } img { width: 60px; height: 60px; position: relative; left: -60px; /*在Chrome浏览器下(低版本)，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。*/ border-right: 60px solid transparent; filter: drop-shadow(60px 0px 0 red); } </style> </head> <body> <div class="wrap"> <img src="img/snowflake.png" alt=""> </div> </body> </html>
效果
