自主 代碼 -s 普通 後臺 www size inf 程序

需求：後臺給了一個規規矩矩的頭像，或圓或方，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蒙層編寫異形頭像