---
title: 背景
date: 2023-05-28 10:55:38
permalink: /pages/basics/background
article: false
---

## 深色背景
在 class 中加入 `bg-red|orange|...`

```css
.bg-red  /* 嫣红 #e54d42 */
.bg-orange  /* 桔橙 #f37b1d */
.bg-yellow  /* 明黄 #fbbd08 */
.bg-olive  /* 橄榄 #8dc63f */
.bg-green  /* 森绿 #39b54a */
.bg-cyan  /* 天青 #1cbbb4 */
.bg-blue  /* 海蓝 #0081ff */
.bg-purple  /* 姹紫 #6739b6 */
.bg-mauve  /* 木槿 #9c26b0 */
.bg-pink  /* 桃粉 #e03997 */
.bg-brown  /* 棕褐 #a5673f */
.bg-grey  /* 玄灰 #8799a3 */
.bg-gray  /* 草灰 #aaaaaa */
.bg-black  /* 墨黑 #333333 */
.bg-white  /* 雅白 #ffffff */
```

## 浅色背景
在 class 中加入 `bg-red|orange|...`
在 class 中再加入 `light`

```css
.light .bg-red  /* 嫣红 #e54d42 */
.light .bg-orange  /* 桔橙 #f37b1d */
.light .bg-yellow  /* 明黄 #fbbd08 */
.light .bg-olive  /* 橄榄 #8dc63f */
.light .bg-green  /* 森绿 #39b54a */
.light .bg-cyan  /* 天青 #1cbbb4 */
.light .bg-blue  /* 海蓝 #0081ff */
.light .bg-purple  /* 姹紫 #6739b6 */
.light .bg-mauve  /* 木槿 #9c26b0 */
.light .bg-pink  /* 桃粉 #e03997 */
.light .bg-brown  /* 棕褐 #a5673f */
.light .bg-grey  /* 玄灰 #8799a3 */
```

## 渐变背景
在 class 中加入 `bg-gradual-red|orange|...`

```css
.bg-gradual-red /* 魅红 #f43f3b - #ec008c */
.bg-gradual-orange /* 鎏金 #ff9700 - #ed1c24 */
.bg-gradual-green /* 翠柳 #39b54a - #8dc63f */
.bg-gradual-blue /* 靛青 #0081ff - #1cbbb4 */
.bg-gradual-purple /* 惑紫 #9000ff - #5e00ff */
.bg-gradual-pink /* 霞彩 #ec008c - #6739b6 */
```

## 图片背景
在 class 中加入 `bg-img bg-mask`

> css 代码
```css
.bg-img    把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
.bg-mask   在背景图片加一层黑色遮罩

.bg-shadeTop   背景图片加一层黑色遮罩上面开始
.bg-shadeBottom 背景图片加一层黑色遮罩下面开始
```

> 演示代码
```vue
<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>
```

## 透明背景（文字层）

在 class 中加入 `bg-shadeBottom|shadeTop`

> 演示代码
```vue
<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>
```