在网页中看到这种图:
第一反应是把这个图片切片,做成png。
没毛病~!但是,如果要更换图中的妹子,岂不是又要切一次图??麻烦。
今天居然看到 CSS3 的一个新增样式 mask (遮罩),可以简单实现上图效果,而且可以保证内容图片完整,直接更换不用切片。
开始~
一、准备工作
准备内容图片,和遮罩png图。不出意外的话,建议内容图片和遮罩png图大小一样(当然也可以不一样,具体根据需要来定。)
PNG图:400*400,名:m1.png
内容图:400*400
扫描二维码关注公众号,回复:
11506867 查看本文章
二、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部分会放大。
五、小结
- 作为遮罩mask的图片,不论颜色,只看透明区域和不透明区域。
- mask能盖住的部分除了图片,文字之类的内容都可以。
- 目前 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 的有趣应用,等着我们去开发~!