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