CSS3蒙版 — 元旦快乐！
Posted 码匠与HTML5学堂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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，即线性渐变与径向渐变，一个高逼格的进阶知识。
相关文章推荐：
以上是关于CSS3蒙版 — 元旦快乐！的主要内容，如果未能解决你的问题，请参考以下文章