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

先看效果图

源码

<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">
  <view
    style="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)是为了去除模糊后的图片白边