IT兄弟连 HTML5教程 CSS3属性特效 遮罩

 

CSS遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中的alpha透明通道的效果。遮罩有三个属性可以设置，分别是mask-image、mask-position、mask-repeat。

首先我们需要一个合适的遮罩图片。在ps里操作很简单，制作步骤如下：

1．打开你想要作为遮罩的透明png24的图片

2．选择图层菜单，然后图层样式最后是颜色叠加

3.在颜色叠加对话框里面改变颜色值为白色

4.点击ok关闭对话框

5.选择文件菜单，保存为web，替换旧的图片

执行上面的5个步骤，我们使用ps制成了一个五边形，如下图：

 

下例是一个简单遮罩的例子，为一个div设置一张背景图，再增加上图的遮罩，代码如下：

 

该div的遮罩图片为“mask.png”且不重复，遮罩图片的位置在“50% 50%”，在浏览器里的执行结果如图1：

图1  CSS3遮罩