特殊形狀圖片之遮罩蒙版CSS3-Mask效果

0評(píng)論 2017-04-19 18:19:42

收藏 | 點(diǎn)贊

  
小五最近做的項(xiàng)目，需要一個(gè)小效果，就是獲取用戶頭像以心形的形狀展現(xiàn)在頁(yè)面上，開(kāi)始小五想的實(shí)現(xiàn)方式是canvas畫圖或CSS3的clip（剪切），發(fā)現(xiàn)都不理想，和設(shè)計(jì)稿里的圖形美觀度相差太大，而且實(shí)現(xiàn)起來(lái)太麻煩，后來(lái)，小五采用了一個(gè)CSS3的新增屬性完美的解決了這個(gè)問(wèn)題，今天就來(lái)和大家分享一下。
   首先來(lái)解釋一下遮罩、蒙版：和PS中的蒙版、Flash中的遮罩層很類似
遮罩：為了得到特殊的顯示效果，可以在遮罩層上創(chuàng)建一個(gè)任意形狀的“視窗”，遮罩層下方的對(duì)象可以通過(guò)該“視窗”顯示出來(lái)，而“視窗”之外的對(duì)象將不會(huì)顯示。mask便是創(chuàng)建這樣一個(gè)遮罩層。
 
一、Mask 的兼容性
   以下是來(lái)自 caniuse 的統(tǒng)計(jì)：
   ie/edge 全面不支持，Android 和 iOS Safari 陣營(yíng)幾乎全線飄淺綠，意味著支持部分功能 。不過(guò)，Android 4.0 及以下版本的對(duì) mask 的兼容性并不友好！多虧了近幾年智能手機(jī)市場(chǎng)的良性競(jìng)爭(zhēng)，給移動(dòng)前端制造了一個(gè)相對(duì)良好的環(huán)境，經(jīng)小五親測(cè)，主流機(jī)型基本上都支持這個(gè)屬性了。
 
二、Mask 的原理
  蒙板可以是 CSS3 漸變或者半透明的PNG圖片，蒙板元素的alpha值為0的時(shí)候會(huì)覆蓋下面的元素，為1的時(shí)候會(huì)完全顯示下面的內(nèi)容。如下：
 
三、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 的語(yǔ)法與 background 是相仿的。
 
四、實(shí)戰(zhàn)
  原素材：
 
  ① 心形圖片實(shí)現(xiàn)
  HTML:

 
  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);
}
DEMO演示
 
  ② 漸變圖片實(shí)現(xiàn)
  HTML：

  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);
}
DEMO演示
 
  或者是將漸變以代碼的形式進(jìn)行設(shè)置
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))); 
}
  效果呈現(xiàn)：

暫無(wú)評(píng)論