一、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>
效果
