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遮罩