淺談圖片蒙版效果-webkit-mask，

淺談圖片蒙版效果-webkit-mask，

會用PS的童鞋一定知道“蒙版”的概念，它可以在圖片上實現一定的遮罩效果，當然這裡我們不介紹ps裡的蒙版，而是介紹利用CSS3的新屬性-webkit-mask來實現網頁中的圖片遮罩效果。

大家對-webkit-mask這一屬性可能不太熟悉，或許有很多人都是第一次見到，沒錯，這一屬性也是還未被眾多瀏覽器所支援的CSS屬性，目前支援這一屬性的僅有-webkit-首碼的Google及safari瀏覽器，但是相信在不久的未來這一屬性將被其他主流瀏覽器所支援，下面我們來一睹為快。

首先介紹一下它的屬性值，可以有兩種寫法（圖片蒙版、漸層蒙版）：

一、圖片蒙版

.demo1 {    background : url("images/logo.png") no-repeat;    -webkit-mask : url("images/mask.png");}

它的屬性值與background的文法基本一樣，相關的屬性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。

下面就是其實現的：

這裡需要注意的是第二張mask.png中黑色部分的透明度（alpha）值為1，將完全顯示其下方的圖片地區，而其餘部分的透明度為0（alpha值），將完全覆蓋其下方的圖片地區。

 

二、漸層蒙版

.demo1 {    background : url("images/logo.png") no-repeat;    -webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

其屬性值為CSS漸層老式文法：-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) 

而新式文法：-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  經過我的測試發現暫不支援

如下：

 

三、logo遮罩動態效果

利用-webkit-mask我們還可以製作炫酷的logo遮罩動畫效果，用js控制讓蒙版動起來。如下：

實現代碼如下：

$(function(){     $(".mask").mouseover(function(){          var b=0,c=$(this),          d=setInterval(function(){               if(b>parseInt(c.width()+50)){clearInterval(d);}               c.css({"-webkit-mask":"-webkit-gradient(radial, 88 53,"+b+", 88 53, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))"});               b++;           },0);     });});

通過setInterval來對遮罩層漸層位置進行動態變化。

我們還可以改變漸層的起點和終點位置來實現不同的效果：

-webkit-gradient(radial, 0 0,"+b+", 0 0, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))

好了，是不是很炫酷？

但是除了webkit的瀏覽器外其他瀏覽器不支援哦，如果對瀏覽器安全色性要求很高的話慎用，但是本著漸進增強意識，有總比沒有好對吧，看不到也無所謂對吧。

over~歡迎評論。

 

原創文章，轉載請註明來自一個蘿蔔一個坑  -部落格園[http://www.cnblogs.com/luozhihao]
本文地址：http://www.cnblogs.com/luozhihao/p/4785076.html