9.CSS | “百变”图片秀 mask

“mask-image”看着“图片”：“你想变啊！图片，你要是想变的话你就来找我嘛，你不找我怎么知道你想变呢？固然你不太懂跟我怎么相处，然则你照旧得找我，我会带你的嘛，不相处你说你想变我不给你变，你不想变我也不给你变，要讲沟通嘛！你想改头换面就来找我，我肯定给你想要的诶，你是真的想整型吧？”。
——题记，改编源自《大话西游之仙履奇缘》

正文

我们在写前端样式的时候，css中实现不规则的图片可以利用border，或者clip-path（之前文章介绍过），今天来说说另一种方法，也是比较简单的，可以实现各种奇葩形状，秀各种百变图片，照例先上张效果图：

效果图.png

这个css可以怎么实现，之前的“我”说“clip-path”，本文的“我”当然说“mask-image”。mask-image，也就是遮罩图片的意思，它的作用相当于利用PS的alpha通道。一张原图，一张需要显示的区域图，两个结合在一起，就显示为“区域图形状的原图”。且看：

原图 frame.png，非JPG格式

然后使用mask-image属性，读取遮罩图片透明信息，应用到元素图片上，如 -webkit-mask-image: url(../images/frame.png);

mask-image结合图

一行代码，一张图片，我们就可以看到效果图了，这样够了么？当然不够。有时候在iphone7显示会有点问题，可能会导致重复性，保险起见，最好设置mask-size: 宽度 高度 及mask-repeat: no-repeat，这个跟background很相似，同样可以简写。
然后到这里完了么？点点头：完了。反问：真的完了？眼尖的人可能发现，好像跟效果图不太一样，呀，少了边框。这个边框怎么处理，我们换个思路就可以解决了，平时常用的一个方法，外面套个标签，设置下background，外级图片如下：

边框.png

over，附上最终代码：

/*html*/
<div class="pic-frame">
    <div class="pic"></div>
</div>

/*css*/
.pic-frame {
    width: 564px;
    height: 732px;
    margin: auto;
    background-image: url(../images/frame3.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.pic {
    width: 564px;
    height: 732px;
    background: url(../images/pic.jpg) no-repeat center;
    background-size: cover;
    /*background-image: url(../images/pic.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;*/
    -webkit-mask: url(../images/frame2.png) no-repeat;
    -webkit-mask-size: 564px 732px ;
/*  -webkit-mask-size: 564px 732px ;
    -webkit-mask-image: url(../images/frame2.png);
    -webkit-mask-repeat: no-repeat;*/
}

效果实现，不过这个属性还没有写进w3c里，webkit内核可以使用，基本包括了移动端，具体也可看MDN的介绍。个人觉得颇有意思的属性，来实现各种奇葩形状~