前不久做了一個項目，需要一個小效果，就是獲取用戶頭像以心形的形狀展現在頁面上，開始小五想的實現方式是canvas畫圖或CSS3的clip（剪切），發現都不理想，和設計稿里的圖形美觀度相差太大，而且實現起來太麻煩，后來，小五采用了一個CSS3的新增屬性完美的解決了這個問題，今天就來和大家分享一下。
首先來解釋一下遮罩、蒙版：和PS中的蒙版、Flash中的遮罩層很類似
遮罩：為了得到特殊的顯示效果，可以在遮罩層上創建一個任意形狀的“視窗”，遮罩層下方的對象可以通過該“視窗”顯示出來，而“視窗”之外的對象將不會顯示。mask便是創建這樣一個遮罩層。
一、Mask 的兼容性
以下是來自 caniuse 的統計：
ie/edge 全面不支持，Android 和 iOS Safari 陣營幾乎全線飄淺綠，意味着支持部分功能 。不過，Android 4.0 及以下版本的對 mask 的兼容性並不友好！多虧了近幾年智能手機市場的良性競爭，給移動前端制造了一個相對良好的環境，經小五親測，主流機型基本上都支持這個屬性了。
二、Mask 的原理
蒙板可以是 CSS3 漸變或者半透明的PNG圖片，蒙板元素的alpha值為0的時候會覆蓋下面的元素，為1的時候會完全顯示下面的內容。如下：
三、mask 的屬性
-webkit-mask-image:url | gradient /*可以使用圖片或漸變作為遮罩層*/ -webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat -webkit-mask-position:x y; -webkit-mask-clip:border | padding | content -webkit-mask-origin:border | padding | content
PS：mask 的語法與 background 是相仿的。
四、實戰
原素材：
① 心形圖片實現
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <title>Mask 蒙版1</title> <link href="style/style.css" rel="stylesheet"> <style type="text/css"> img{position: absolute; width: 300px;height: 256px; left: 50%;top: 50%; margin-left: -150px;margin-top: -128px; -webkit-mask-image:url(images/mask1.png);} </style> </head> <body> <img src="images/img.jpg"/> </body> </html>
DEMO演示
② 漸變圖片實現
代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <title>Mask 蒙版2</title> <link href="style/style.css" rel="stylesheet"> <style type="text/css"> img{position: absolute; width: 300px;height: 256px; left: 50%;top: 50%; margin-left: -150px;margin-top: -128px;-webkit-mask-image:url(images/mask2.png);} </style> </head> <body> <img src="images/img.jpg"/> </body> </html>
DEMO演示
或者是將漸變以代碼的形式進行設置
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <title>Mask 蒙版3</title> <link href="style/style.css" rel="stylesheet"> <style type="text/css"> img{position: absolute; width: 300px;height: 256px; left: 50%;top: 50%; margin-left: -150px;margin-top: -128px;-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0))); } </style> </head> <body> <img src="images/img.jpg"/> </body> </html>
效果呈現：
DEMO演示
好啦，至此CSS3遮罩蒙版效果講完了，想生成多姿多彩圖案的小伙伴快快試試吧~~~
此文章主要發布在本人所在公司網站H5案例分享（http://www.h5-share.com/）、公司公眾號H5握手和個人博客中，轉載請注明出處。