先看效果图

源码

<view style="overflow: hidden;"><image src='/image/headImg.jpg' mode='widthFix'style='width:100%; display: block; filter: blur(2rpx); transform: scale(1.2);'></image></view><view class="bg-white padding-bottom-sm"><viewstyle="height: 96rpx; margin-top: -96rpx; position: relative; background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 50%);"></view><view class="flex self-center align-center" style="margin-top: -70rpx; position: relative;"><view class="flex-sub"><view class="cu-avatar xl round margin-left"style="background-image:url(https://ossweb-/images/lol/web10/skin/big10001.jpg);"></view></view><view class="flex-double"><view class="grid col-{{baseInfo.length <= 5 ? baseInfo.length : '3'}}"><view class="flex justify-center" wx:for="{{baseInfo}}" wx:key="unique"><view class="text-right padding-xs"><view class="text-df text-gray text-bold">{{item.title}}</view><view class="text-bold text-xl">{{item.value}}</view></view></view></view></view></view>

简单说明

本文章较为简单，源码直接可运行，故不做详细说明，仅说明以下几点

图片的模糊程度可以通过filter: blur(2rpx)属性进行修改transform: scale(1.2)是为了去除模糊后的图片白边

如果觉得《微信小程序界面设计——自定义一个好看的头图》对你有帮助，请点赞、收藏，并留下你的观点哦！