Background 背景

css 背景工具，可以在标签中方便快速的设置背景样式。

基本使用

c-bg-{主题色|背景色}开头的背景类。

<template>
    <view class="c-bg-primary" style="height: 200px" />
        <!-- 在系统标签上 -->
    </view>

    <c-box bgColor="c-bg-base" height="200">
        <!-- 通过bgColor属性设置-->
    </c-box>

    <c-box c-class="c-bg-black" height="200">
        <!-- 通过c-class属性设置 -->
    </c-box>
</template>

透明背景类c-bg-transparent。

颜色

默认背景色base,darker,dark,light,lighter。

默认主题有black,white,primary,success,warning,danger,info，主题扩展色有主题-light-{1~9}和主题-dark-{1~5}。

主题背景透明色：主题-{1~9}表示rgba(主题色, 0.1~0.9)和主题-{1~9}-5表示rgba(主题色, 0.15~0.95)。注意：主题扩展色没有透明背景色。

<template>
    <!-- 主题背景色和主题扩展背景色 -->
    <view class="c-bg-primary" style="height: 50px"></view>
    <view class="c-bg-primary-light-5" style="height: 50px"></view>
    <view class="c-bg-primary-dark-3" style="height: 50px"></view>

    <!-- 主题背景透明色 -->
    <view class="c-bg-primary-1" style="height: 50px"></view>
</template>

颜色配置

// uni.scss

// 默认背景色
$bg-color: #2C2D2E;

$bg-colors: (
    // 默认背景色
    'darker': #000,

    // 扩展背景色
    'customBg': #DCDCDC,
);