先看效果图

源码

<view style="overflow: hidden;"><image src='http://static.iswenzi.com/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-img.qq.com/images/lol/web201310/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)是为了去除模糊后的图片白边

微信小程序界面设计——自定义一个好看的头图相关推荐

微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-style字体风格
font-style字体风格微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 基础用法 font- ...
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-direction 文本方向
样式wxss中使用css课程-文本-direction 文本方向微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients
线性渐变Linear Gradients 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 ...
微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-使用透明度（transparent）
渐变Gradients-使用透明度(transparent) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huang ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
小程序中的WXSS(css)选择器课程-子元素选择器微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
微信小程序界面设计小程序中CSS3样式精通课程-边框-box-shadow 盒阴影
边框-box-shadow 盒阴影微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法浏览 ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类
小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topi ...
微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-size字体大小
font-size字体大小微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 基础语法有能力管理文 ...

微信小程序界面设计——自定义一个好看的头图

先看效果图

源码

简单说明

微信小程序界面设计——自定义一个好看的头图相关推荐

最新文章

热门文章