html5 div遮罩,CSS3 遮罩属性

遮罩(Mask)和Photoshop里的蒙版效果含义一致，用于为指定元素建立一个覆盖在上面的遮罩层。它显示在元素之上，和背景效果使用起来正好相反。我们可以使用遮罩在元素上方叠加一幅图或者一个渐变效果。

遮罩、内容和背景效果的显示层次如下图所示：

遮罩属性的关键字为mask，它和background形式非常相似，各个分解的属性都可以和background对应，比如mask-attachment对应background-attachment， mask-clip对应background-clip，mask-origin对应background-origin，mask-image对应backgroundimage，mask-repeat对应background-repeat，mask-composite对应background-composite，mask-box-image对应border-image。

例如，我们要为下图左边的图像合成右边的透明效果(右边的图表示中间透明，四周为白色的效果)，以前只能专门为此制作一张图片，现在我们可以用遮罩来实现。

实现代码如下：

效果图如下：

以往要在网页中达到文字渐变效果，需要用一幅透明渐变的图片覆盖在文字上。这种方式的优点是图片可控性强，能实现很复杂的渐变效果，但是缺点是图片渐变色必须与背景色一致，同时损失了鼠标点击、文字选择等事件的响应。另一种改进的解决方案是使用css3的背景渐变，用一个背景颜色渐变的元素代替图片。和第一种方式相比，第二种方式的优点是不使用图片，减少了网络请求量和流量，但是仍然无法避免第一种方法的不足。

采用遮罩可以完全避免以上方案的不足，达到理想的显示效果。

例如，下图所示效果的值为mask-image: linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0))。