码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-27 21:00:35      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:www.   mask   inf   宽高   实现   编写   div   com   覆盖   

需求:后台给了一个规规矩矩的头像,或圆或方,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蒙层编写异形头像

标签:www.   mask   inf   宽高   实现   编写   div   com   覆盖   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!