會用PS的童鞋一定知道“蒙版”的概念,它可以在圖片上實現一定的遮罩效果,當然這里我們不介紹ps里的蒙版,而是介紹利用CSS3的新屬性-webkit-mask來實現網頁中的圖片遮罩效果。
大家對-webkit-mask這一屬性可能不太熟悉,或許有很多人都是第一次見到,沒錯,這一屬性也是還未被眾多瀏覽器所支持的CSS屬性,目前支持這一屬性的僅有-webkit-前綴的谷歌及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~歡迎評論。