CSS3干货19：CSS3中的遮罩 mask 样式及其拓展

在网页中看到这种图：

第一反应是把这个图片切片，做成png。

没毛病~！但是，如果要更换图中的妹子，岂不是又要切一次图？？麻烦。

今天居然看到 CSS3 的一个新增样式 mask （遮罩），可以简单实现上图效果，而且可以保证内容图片完整，直接更换不用切片。

开始~

一、准备工作

准备内容图片，和遮罩png图。不出意外的话，建议内容图片和遮罩png图大小一样（当然也可以不一样，具体根据需要来定。）

PNG图：400*400，名：m1.png

内容图：400*400

二、HTML结构和基本CSS样式

.mask{
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 400px;
}

三、添加 mask

.mask{ 
    ...省略其他样式...
    mask: url("images/m1.png") center center/400px 400px no-repeat ;
    -webkit-mask:url("images/m1.png") center center/400px 400px no-repeat ; 
}

解释：设置mask遮罩图片的地址，位置 / 大小，是否重复。

四、给mask添加过渡动画

.mask{
    ...省略其他样式...
    transition:all 0.5s;
}
.mask:hover{
    mask: url("images/m1.png") center center/400px 400px   no-repeat ;
    -webkit-mask:url("images/m1.png") center center/420px 420px no-repeat ;
}

当鼠标放到 div.mask 上的时候，mask部分会放大。

五、小结

1. 作为遮罩mask的图片，不论颜色，只看透明区域和不透明区域。
2. mask能盖住的部分除了图片，文字之类的内容都可以。
3. 目前 mask 样式还未最终形参标准，chrome 派系浏览器还必须添加 浏览器前缀 -webkit-。不过 firefox 从 53 版本开始已经全面支持 mask。

mask 的浏览器支持情况如下：图来自 caniuse.com

     3. 如果 mask 图片有半透明的部分，那么展示的内容效果也是半透明的。

换一个半透明的png图，作为 mask 的效果：

拓展1：SVG 中的 mask

SVG 也有 mask 效果。

 

注意：

1. SVG 遮罩中，白色可见，黑色不可见，其他颜色根据颜色的深浅呈现不同的半透明效果。

2. 在应用 mask 的内容上要添加 mask 属性。

拓展2：结合SVG和mask样式的遮罩

HTML：

CSS：

*{
    margin: 0;
    padding: 0;
}
.mask{
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 400px;
    position: relative;
}
.mask svg{
    position: absolute;
    top: 0;
    right: 0;
}

.mask svg text{
    text-anchor: middle;
    font-size: 50px;
}
.mask > svg > rect{
    -webkit-mask: url(#svgmask);
    mask: url(#svgmask);
}

mask 应用示例：一些不规则的图像展示

当然，更多 mask 的有趣应用，等着我们去开发~！