在网页中看到这种图:
第一反应是把这个图片切片,做成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部分会放大。
五、小结
- 作为遮罩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 的有趣应用,等着我们去开发~!
今天的文章css遮罩层原理_css模糊遮罩效果[通俗易懂]分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/86515.html