ColorUI/demo/pages/basics/background/background.wxml

<custom style="height:{{CustomBar}}px;">
  <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
      <text class='icon-back'></text> 背景颜色
    </navigator>
  </bar>
</custom>

<bar class="solid-bottom">
  <view class='action'>
    <text class='icon-title text-blue'></text>深色背景
  </view>
</bar>
<view class='grid col-3 padding-sm'>
  <view class='padding-sm' wx:for="{{ColorList}}" wx:key>
    <view class='bg-{{item.name}} padding radius text-center shadow-blur'>
      <view class="text-lg">{{item.title}}</view>
      <view class='margin-top-sm text-Abc'>{{item.name}}</view>
    </view>
  </view>
</view>

<bar class="solid-bottom">
  <view class='action'>
    <text class='icon-title text-blue'></text>淡色背景
  </view>
</bar>
<view class='grid col-3 bg-white padding-sm'>
  <view class='padding-sm' wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
    <view class='bg-{{item.name}} padding radius text-center light'>
      <view class="text-lg">{{item.title}}</view>
      <view class='margin-top-sm text-Abc'>{{item.name}}</view>
    </view>
  </view>
</view>
<bar class="solid-bottom margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>渐变背景
  </view>
</bar>
<view class='grid col-2 padding-sm'>
  <view class='padding-sm'>
    <view class='gradual-red padding radius text-center shadow-blur'>
      <view class="text-lg">魅红</view>
      <view class='margin-top-sm text-Abc'>#f43f3b - #ec008c</view>
    </view>
  </view>
  <view class='padding-sm'>
    <view class='gradual-orange padding radius text-center shadow-blur'>
      <view class="text-lg">鎏金</view>
      <view class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</view>
    </view>
  </view>
  <view class='padding-sm'>
    <view class='gradual-green padding radius text-center shadow-blur'>
      <view class="text-lg">翠柳</view>
      <view class='margin-top-sm text-Abc'>#39b54a - #8dc63f</view>
    </view>
  </view>
  <view class='padding-sm'>
    <view class='gradual-blue padding radius text-center shadow-blur'>
      <view class="text-lg">靛青</view>
      <view class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</view>
    </view>
  </view>
  <view class='padding-sm'>
    <view class='gradual-purple padding radius text-center shadow-blur'>
      <view class="text-lg">惑紫</view>
      <view class='margin-top-sm text-Abc'>#9000ff - #5e00ff</view>
    </view>
  </view>
  <view class='padding-sm'>
    <view class='gradual-pink padding radius text-center shadow-blur'>
      <view class="text-lg">霞彩</view>
      <view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
    </view>
  </view>
</view>
<bar class="margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>图片背景
  </view>
</bar>
<view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
  <view class='padding-xl text-white'>
    <view class='padding-xs text-xl'>
      我和春天有个约会
    </view>
    <view class='padding-xs'>
      I Have a Date with Spring
    </view>
  </view>
</view>
<bar class="margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>视频背景
  </view>
</bar>
<view class="bg-video bg-mask">
  <video src='https://www.weilanwl.com/theme/wl/assets/images/slider1.mp4' autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"></video>
  <cover-view class='padding-xl text-white'>
    <cover-view class='padding-xs text-xl'>
      开源是创新的动力之源
    </cover-view>
    <cover-view class='padding-xs'>
      Open Source is the Power Source of Innovation
    </cover-view>
  </cover-view>
</view>
<bar class="margin-top">
  <view class='action'>
    <text class='icon-title text-blue'></text>透明背景(文字层)
  </view>
</bar>
<view class='grid col-2 padding-sm'>
  <view class='padding-sm'>
    <view class="bg-img padding-bottom-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
      <view class='bg-shadeTop padding padding-bottom-xl'>
        上面开始
      </view>
    </view>
  </view>
  <view class='padding-sm'>
    <view class="bg-img padding-top-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
      <view class='bg-shadeBottom padding padding-top-xl '>
        下面开始
      </view>
    </view>
  </view>
</view>