html图片蒙版效果代码,浅谈图片蒙版效果-webkit-mask_html/css_WEB-ITnose

会用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渐变