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

在网页中看到这种图：

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

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

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

开始~

一、准备工作

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

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

内容图：400*400

二、HTML结构和基本CSS样式

<div class="mask">
    <img src="images/3d/11.jpg" alt="">
</div>

.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 效果。

<div class="mask">
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <mask id="svgmask" x="0" y="0" width="100%" height="100%">
                <rect x="0" y="0" width="100%" height="100%" fill="#000" ></rect>
                <!-- 遮罩内容 -->
                <text x="200" y="110" fill="#fff">
                  I love you
                    我爱你
                </text>
                <circle cx="200" cy="200" r="100"
                        stroke-width="0" fill="#fff"></circle>
                <!-- 遮罩内容 end -->
            </mask>
        </defs>
        <!-- 图片内容 -->
        <image href="images/1.jpg" x="0" y="0" width="400" height="400"
               mask="url(#svgmask)"></image>
        <!-- 图片内容 end -->
    </svg>
</div>

 

注意：

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

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

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

HTML：

<div class="mask">
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <mask id="svgmask" x="0" y="0" width="100%" height="100%">
                <rect x="0" y="0" width="100%" height="100%" fill="#fff" ></rect>
                <!-- 遮罩内容 -->
                <text x="200" y="100" fill="#000">
                  I love you
                    我爱你
                </text>
                <circle cx="200" cy="200" r="100"
                        stroke-width="0" fill="#000"></circle>
                <!-- 遮罩内容 end -->
            </mask>
        </defs>
        <rect x="0" y="0" width="100%" height="100%"
              fill="#fff" ></rect>
    </svg>
    <!-- 内容可以是图片，视频等 -->
    <img src="images/1.jpg" width="400" height="400" alt="">
</div>

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 的有趣应用，等着我们去开发~！