CSS3蒙版 — 元旦快乐！

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果，可我们在这里并不打算介绍PS的蒙版效果，而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-webkit-mask来实现在网页中。-webkit-mask这一属性相信大家并不是很熟悉，也是CSS3中一些高级且被严重低估的属性之一，很多人都是第一次见到，-webkit-mask之所以不常见，主要是还未被众多浏览器所支持，目前支持这一属性仅有-webkit-前缀的浏览器，但是相信不久的将来支持这一属性的浏览器会越来越多。

本文主要内容

1.-webkit-mask基本介绍

2.-webkit-mask图片蒙版

3.-webkit-mask渐变蒙版

4.-webkit-mask的其它属性

1.-webkit-mask的基本介绍

为了得到特殊的显示效果，通常在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示，mask便是创建这样一个遮罩层。现在我们一起来看看，先给波效果图。

其中心形为mask蒙版遮罩层，心形后面为背景图，是如何把背景以心形的形状展现出来的呢？现在我们一起来看看mask图片蒙版的实现方法。

2.-webkit-mask图片蒙版

-webkit-mask这个属性相当强大，它非常值得深入研究，因为它可以在实际应用中为你省掉很来时间。让一个元素添加蒙版成为了可能，从而你可以创建任何形状且有创意的花样，蒙版可以是半透明或者全透明的的png图片。如下例所示：

背景图片：

蒙版图片：

HTML代码：

<body>
   <div class="mask">
   </div>
</body>

CSS样式：

<style type="text/css">
 .mask {
     width: 320px;
     height: 320px;
     margin: 100px auto;

     background: url('mj.png');// 背景图片
     -webkit-mask: url("c.png");// 蒙版图片
  }
</style>

3.-webkit-mask渐变蒙版

-webkit-mask的蒙版层不仅仅可以通过png图片来实现，还可以使用它的alpha值来控制;

ps: alpha为透明度，即为rgba(0, 0, 0, 1)中的1；

alpha值为0时，覆盖图片下的内容；

alpha值为1时，完全显示下面的内容；

CSS样式：

.mask {
     width: 320px;
     height: 320px;
     background: url('mj.png');
     -webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
     margin: 100px auto;
}

效果如下：

4.mask的其它属性

mask的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat、 -webkit-mask-image等，且mask属性严重依赖于background中的语法，大家完全可以按照background的语法形式去控制蒙版图片。

如：

background-position: x y; //控制背景图片位置
-webkit-mask-positon: x y; //控制遮罩层位置

小结

这各位看官切记，除了webkit的浏览器外其他浏览器不支持，如果对浏览器兼容性要求很高的话请慎重使用，本着对新知识的渴求与扩展，咱们知道总比不知道的好。

其次本文中的渐变模版有运用到CSS3的线性渐变，为了深入了解，下周主要为大家介绍CSS3的Gradient，即线性渐变与径向渐变，一个高逼格的进阶知识。