首页 > 其他 > 详细

利用mask-image蒙层编写异形头像

时间:2018-07-27 19:51:32      阅读:305      评论:0      收藏:0      [点我收藏+]

需求:后台给了一个规规矩矩的头像,或圆或方,UI要求展示成水滴的形状。正在想到底如何实现的时候,不由自主去翻了鑫神的博客,正好找到了答案,窃喜(·_·)

UI给的形状:

技术分享图片

后台给的头像(忽略橙色背景色,我加的...)

技术分享图片

最终需要的效果:

技术分享图片

PS:被覆盖图像的宽高与目标形状图越接近越好

废话不多说,贴代码:(本栗子截取的是小程序的代码片段,同样适用于普通h5页,只是标签不同而已·.·)

wxml片段:

  <view class="avatar1-box">
        <image src="../../images/zhangyixing_120.png" class="avatar1"></image>
      </view>
 
wxss片段:
.avatar1-box {
  width: 280px;
  height: 337px;
  -webkit-mask-image: url(‘../../images/1st-avatar-mask.png‘); //蓝色水滴形状图
  mask-image: url(‘../../images/1st-avatar-mask.png‘); //蓝色水滴形状图
  -webkit-mask-size: 100% 100%;
  mask-image-size: 100% 100%;
}

.avatar1 {
  width: 337px;
  height: 337px;
}

参考文章:https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/ 

利用mask-image蒙层编写异形头像

原文:https://www.cnblogs.com/ganmy/p/9379126.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!