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

需求:后台给了一个规规矩矩的头像,或圆或方,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/ 

posted @ 2018-07-27 18:25  南韵  阅读(517)  评论(0编辑  收藏  举报