深色背景

image.png

  1. <view class="grid col-3 padding-sm">
  2.             <view class="padding-sm">
  3.                 <view class="padding radius text-center shadow-blur bg-red">
  4.                     <view class="text-lg">嫣红</view>
  5.                     <view class="margin-top-sm text-Abc">red</view>
  6.                 </view>
  7.             </view>
  8.             <view class="padding-sm">
  9.                 <view class="padding radius text-center shadow-blur bg-orange">
  10.                     <view class="text-lg">桔橙</view>
  11.                     <view class="margin-top-sm text-Abc">orange</view>
  12.                 </view>
  13.             </view>
  14.             <view class="padding-sm">
  15.                 <view class="padding radius text-center shadow-blur bg-yellow">
  16.                     <view class="text-lg">明黄</view>
  17.                     <view class="margin-top-sm text-Abc">yellow</view>
  18.                 </view>
  19.             </view>
  20.             <view class="padding-sm">
  21.                 <view class="padding radius text-center shadow-blur bg-olive">
  22.                     <view class="text-lg">橄榄</view>
  23.                     <view class="margin-top-sm text-Abc">olive</view>
  24.                 </view>
  25.             </view>
  26.             <view class="padding-sm">
  27.                 <view class="padding radius text-center shadow-blur bg-green">
  28.                     <view class="text-lg">森绿</view>
  29.                     <view class="margin-top-sm text-Abc">green</view>
  30.                 </view>
  31.             </view>
  32.             <view class="padding-sm">
  33.                 <view class="padding radius text-center shadow-blur bg-cyan">
  34.                     <view class="text-lg">天青</view>
  35.                     <view class="margin-top-sm text-Abc">cyan</view>
  36.                 </view>
  37.             </view>
  38.             <view class="padding-sm">
  39.                 <view class="padding radius text-center shadow-blur bg-blue">
  40.                     <view class="text-lg">海蓝</view>
  41.                     <view class="margin-top-sm text-Abc">blue</view>
  42.                 </view>
  43.             </view>
  44.             <view class="padding-sm">
  45.                 <view class="padding radius text-center shadow-blur bg-purple">
  46.                     <view class="text-lg">姹紫</view>
  47.                     <view class="margin-top-sm text-Abc">purple</view>
  48.                 </view>
  49.             </view>
  50.             <view class="padding-sm">
  51.                 <view class="padding radius text-center shadow-blur bg-mauve">
  52.                     <view class="text-lg">木槿</view>
  53.                     <view class="margin-top-sm text-Abc">mauve</view>
  54.                 </view>
  55.             </view>
  56.             <view class="padding-sm">
  57.                 <view class="padding radius text-center shadow-blur bg-pink">
  58.                     <view class="text-lg">桃粉</view>
  59.                     <view class="margin-top-sm text-Abc">pink</view>
  60.                 </view>
  61.             </view>
  62.             <view class="padding-sm">
  63.                 <view class="padding radius text-center shadow-blur bg-brown">
  64.                     <view class="text-lg">棕褐</view>
  65.                     <view class="margin-top-sm text-Abc">brown</view>
  66.                 </view>
  67.             </view>
  68.             <view class="padding-sm">
  69.                 <view class="padding radius text-center shadow-blur bg-grey">
  70.                     <view class="text-lg">玄灰</view>
  71.                     <view class="margin-top-sm text-Abc">grey</view>
  72.                 </view>
  73.             </view>
  74.             <view class="padding-sm">
  75.                 <view class="padding radius text-center shadow-blur bg-gray">
  76.                     <view class="text-lg">草灰</view>
  77.                     <view class="margin-top-sm text-Abc">gray</view>
  78.                 </view>
  79.             </view>
  80.             <view class="padding-sm">
  81.                 <view class="padding radius text-center shadow-blur bg-black">
  82.                     <view class="text-lg">墨黑</view>
  83.                     <view class="margin-top-sm text-Abc">black</view>
  84.                 </view>
  85.             </view>
  86.             <view class="padding-sm">
  87.                 <view class="padding radius text-center shadow-blur bg-white">
  88.                     <view class="text-lg">雅白</view>
  89.                     <view class="margin-top-sm text-Abc">white</view>
  90.                 </view>
  91.             </view>
  92.         </view>

淡色背景

image.png

<view class="grid col-3 bg-white padding-sm">
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-red">
                    <view class="text-lg">嫣红</view>
                    <view class="margin-top-sm text-Abc">red</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-orange">
                    <view class="text-lg">桔橙</view>
                    <view class="margin-top-sm text-Abc">orange</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-yellow">
                    <view class="text-lg">明黄</view>
                    <view class="margin-top-sm text-Abc">yellow</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-olive">
                    <view class="text-lg">橄榄</view>
                    <view class="margin-top-sm text-Abc">olive</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-green">
                    <view class="text-lg">森绿</view>
                    <view class="margin-top-sm text-Abc">green</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-cyan">
                    <view class="text-lg">天青</view>
                    <view class="margin-top-sm text-Abc">cyan</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-blue">
                    <view class="text-lg">海蓝</view>
                    <view class="margin-top-sm text-Abc">blue</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-purple">
                    <view class="text-lg">姹紫</view>
                    <view class="margin-top-sm text-Abc">purple</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-mauve">
                    <view class="text-lg">木槿</view>
                    <view class="margin-top-sm text-Abc">mauve</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-pink">
                    <view class="text-lg">桃粉</view>
                    <view class="margin-top-sm text-Abc">pink</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-brown">
                    <view class="text-lg">棕褐</view>
                    <view class="margin-top-sm text-Abc">brown</view>
                </view>
            </view>
            <view class="padding-sm">
                <view class="padding radius text-center shadow-blur light bg-grey">
                    <view class="text-lg">玄灰</view>
                    <view class="margin-top-sm text-Abc">grey</view>
                </view>
            </view>
        </view>

渐变背景

image.png

<view class="grid col-2 padding-sm">
            <view class="padding-sm">
                <view class="bg-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="bg-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="bg-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="bg-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="bg-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="bg-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>

图片背景

image.png

<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
            <view class="padding-xl text-white">
                <view class="padding-xs text-xxl text-bold">
                    钢铁之翼
                </view>
                <view class="padding-xs text-lg">
                    Only the guilty need fear me.
                </view>
            </view>
        </view>

透明背景（文字层）

image.png

<view class="grid col-2">
            <view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
                <view class="bg-shadeTop padding padding-bottom-xl">
                    上面开始
                </view>
            </view>
            <view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
                <view class="bg-shadeBottom padding padding-top-xl flex-sub">
                    下面开始
                </view>
            </view>
        </view>

视频背景

image.png

<view class="bg-video bg-mask flex align-center" style="height: 422upx;">
            <video src="https://yz.lol.qq.com/v1/assets/videos/aatrox-splashvideo.webm" 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-xxl text-bold">
                    暗裔剑魔
                </cover-view>
                <cover-view class="padding-xs">
                    我必须连同希望一起毁坏……
                </cover-view>
            </cover-view>
        </view>