背景

背景颜色

用于控制元素背景色的功能类。

使用前缀

为了防止和开发者项目中的其他原子化样式语法冲突，样式库默认添加了前缀 lwu，使用示例如下：

vue

<view class="lwu-flex"></view>

语法

TIP

背景颜色已内置暗黑模式的支持
在背景色class后面紧跟 dark 即可实现暗黑模式，示例如下：
html
```
<view class="lwu-bg-primary dark"></view>
```

Class	Properties	平台兼容性说明
bg-transparent	background-color: transparent;	H5、小程序、app-vue
bg-current	background-color: currentColor;	H5、小程序、app-vue、app-nvue
bg-black	background-color: #000000;	H5、小程序、app-vue、app-nvue
bg-white	background-color: #FFFFFF;	H5、小程序、app-vue、app-nvue

Grey / 中性灰

Class	Properties	平台兼容性说明
bg-grey-0	background-color: #f7f8fa;	H5、小程序、app-vue、app-nvue
bg-grey-1	background-color: #f2f3f5;	H5、小程序、app-vue、app-nvue
bg-grey-2	background-color: #e5e6eb;	H5、小程序、app-vue、app-nvue
bg-grey-3	background-color: #c9cdd4;	H5、小程序、app-vue、app-nvue
bg-grey-4	background-color: #a9aeb8;	H5、小程序、app-vue、app-nvue
bg-grey-5	background-color: #86909c;	H5、小程序、app-vue、app-nvue
bg-grey-6	background-color: #6b7785;	H5、小程序、app-vue、app-nvue
bg-grey-7	background-color: #4e5969;	H5、小程序、app-vue、app-nvue
bg-grey-8	background-color: #272e3b;	H5、小程序、app-vue、app-nvue
bg-grey-9	background-color: #1d2129;	H5、小程序、app-vue、app-nvue

Red / 浪漫红

Class	Properties	平台兼容性说明
bg-red-0	background-color: #FFECE8;	H5、小程序、app-vue、app-nvue
bg-red-1	background-color: #FDCDC5;	H5、小程序、app-vue、app-nvue
bg-red-2	background-color: #FBACA3;	H5、小程序、app-vue、app-nvue
bg-red-3	background-color: #F98981;	H5、小程序、app-vue、app-nvue
bg-red-4	background-color: #F76560;	H5、小程序、app-vue、app-nvue
bg-red-5	background-color: #F53F3F;	H5、小程序、app-vue、app-nvue
bg-red-6	background-color: #CB272D;	H5、小程序、app-vue、app-nvue
bg-red-7	background-color: #A1151E;	H5、小程序、app-vue、app-nvue
bg-red-8	background-color: #770813;	H5、小程序、app-vue、app-nvue
bg-red-9	background-color: #4D000A;	H5、小程序、app-vue、app-nvue

Orangered / 晚秋红

Class	Properties	平台兼容性说明
bg-orangered-0	background-color: #FFF3E8;	H5、小程序、app-vue、app-nvue
bg-orangered-1	background-color: #FDDDC3;	H5、小程序、app-vue、app-nvue
bg-orangered-2	background-color: #FCC59F;	H5、小程序、app-vue、app-nvue
bg-orangered-3	background-color: #FC7B;	H5、小程序、app-vue、app-nvue
bg-orangered-4	background-color: #F99057;	H5、小程序、app-vue、app-nvue
bg-orangered-5	background-color: #F77234;	H5、小程序、app-vue、app-nvue
bg-orangered-6	background-color: #CC5120;	H5、小程序、app-vue、app-nvue
bg-orangered-7	background-color: #A23511;	H5、小程序、app-vue、app-nvue
bg-orangered-8	background-color: #771F06;	H5、小程序、app-vue、app-nvue
bg-orangered-9	background-color: #4D0E00;	H5、小程序、app-vue、app-nvue

Orange / 活力橙

Class	Properties	平台兼容性说明
bg-orange-0	background-color: #FFF7E8;	H5、小程序、app-vue、app-nvue
bg-orange-1	background-color: #FFE4BA;	H5、小程序、app-vue、app-nvue
bg-orange-2	background-color: #FFCF8B;	H5、小程序、app-vue、app-nvue
bg-orange-3	background-color: #FFB65D;	H5、小程序、app-vue、app-nvue
bg-orange-4	background-color: #FF9A2E;	H5、小程序、app-vue、app-nvue
bg-orange-5	background-color: #FF7D00;	H5、小程序、app-vue、app-nvue
bg-orange-6	background-color: #D25F00;	H5、小程序、app-vue、app-nvue
bg-orange-7	background-color: #A64500;	H5、小程序、app-vue、app-nvue
bg-orange-8	background-color: #792E00;	H5、小程序、app-vue、app-nvue
bg-orange-9	background-color: #4D1B00;	H5、小程序、app-vue、app-nvue

Gold / 黄昏色

Class	Properties	平台兼容性说明
bg-gold-0	background-color: #FFFCE8;	H5、小程序、app-vue、app-nvue
bg-gold-1	background-color: #FDF4BF;	H5、小程序、app-vue、app-nvue
bg-gold-2	background-color: #FCE996;	H5、小程序、app-vue、app-nvue
bg-gold-3	background-color: #FADC6D;	H5、小程序、app-vue、app-nvue
bg-gold-4	background-color: #F9CC45;	H5、小程序、app-vue、app-nvue
bg-gold-5	background-color: #F7BA1E;	H5、小程序、app-vue、app-nvue
bg-gold-6	background-color: #CC9213;	H5、小程序、app-vue、app-nvue
bg-gold-7	background-color: #A26D0A;	H5、小程序、app-vue、app-nvue
bg-gold-8	background-color: #774B04;	H5、小程序、app-vue、app-nvue
bg-gold-9	background-color: #4D2D00;	H5、小程序、app-vue、app-nvue

Yellow / 柠檬黄

Class	Properties	平台兼容性说明
bg-yellow-0	background-color: #FEFFE8;	H5、小程序、app-vue、app-nvue
bg-yellow-1	background-color: #FEFEBE;	H5、小程序、app-vue、app-nvue
bg-yellow-2	background-color: #FDFA94;	H5、小程序、app-vue、app-nvue
bg-yellow-3	background-color: #FCF26B;	H5、小程序、app-vue、app-nvue
bg-yellow-4	background-color: #FBE842;	H5、小程序、app-vue、app-nvue
bg-yellow-5	background-color: #FADC19;	H5、小程序、app-vue、app-nvue
bg-yellow-6	background-color: #CFAF0F;	H5、小程序、app-vue、app-nvue
bg-yellow-7	background-color: #A38408;	H5、小程序、app-vue、app-nvue
bg-yellow-8	background-color: #785D03;	H5、小程序、app-vue、app-nvue
bg-yellow-9	background-color: #4D3800;	H5、小程序、app-vue、app-nvue

Lime / 新生绿

Class	Properties	平台兼容性说明
bg-lime-0	background-color: #FCFFE8;	H5、小程序、app-vue、app-nvue
bg-lime-1	background-color: #EDF8BB;	H5、小程序、app-vue、app-nvue
bg-lime-2	background-color: #DCF190;	H5、小程序、app-vue、app-nvue
bg-lime-3	background-color: #C9E968;	H5、小程序、app-vue、app-nvue
bg-lime-4	background-color: #B5E241;	H5、小程序、app-vue、app-nvue
bg-lime-5	background-color: #9FDB1D;	H5、小程序、app-vue、app-nvue
bg-lime-6	background-color: #7EB712;	H5、小程序、app-vue、app-nvue
bg-lime-7	background-color: #5F940A;	H5、小程序、app-vue、app-nvue
bg-lime-8	background-color: #437004;	H5、小程序、app-vue、app-nvue
bg-lime-9	background-color: #2A4D00;	H5、小程序、app-vue、app-nvue

Green / 翡翠绿

Class	Properties	平台兼容性说明
bg-green-0	background-color: #E8FFF3;	H5、小程序、app-vue、app-nvue
bg-green-1	background-color: #B0F2D2;	H5、小程序、app-vue、app-nvue
bg-green-2	background-color: #7DE4B6;	H5、小程序、app-vue、app-nvue
bg-green-3	background-color: #4ED79E;	H5、小程序、app-vue、app-nvue
bg-green-4	background-color: #25C98A;	H5、小程序、app-vue、app-nvue
bg-green-5	background-color: #00BC79;	H5、小程序、app-vue、app-nvue
bg-green-6	background-color: #00A06D;	H5、小程序、app-vue、app-nvue
bg-green-7	background-color: #00845F;	H5、小程序、app-vue、app-nvue
bg-green-8	background-color: #00684E;	H5、小程序、app-vue、app-nvue
bg-green-9	background-color: #004D3C;	H5、小程序、app-vue、app-nvue

Cyan / 碧涛青

Class	Properties	平台兼容性说明
bg-cyan-0	background-color: #E8FFFB;	H5、小程序、app-vue、app-nvue
bg-cyan-1	background-color: #B7F4EC;	H5、小程序、app-vue、app-nvue
bg-cyan-2	background-color: #89E9E0;	H5、小程序、app-vue、app-nvue
bg-cyan-3	background-color: #5EDFD6;	H5、小程序、app-vue、app-nvue
bg-cyan-4	background-color: #37D4CF;	H5、小程序、app-vue、app-nvue
bg-cyan-5	background-color: #14C9C9;	H5、小程序、app-vue、app-nvue
bg-cyan-6	background-color: #0DA5;	H5、小程序、app-vue、app-nvue
bg-cyan-7	background-color: #07828B;	H5、小程序、app-vue、app-nvue
bg-cyan-8	background-color: #03616C;	H5、小程序、app-vue、app-nvue
bg-cyan-9	background-color: #00424D;	H5、小程序、app-vue、app-nvue

Blue / 海空蓝

Class	Properties	平台兼容性说明
bg-blue-0	background-color: #E8F7FF;	H5、小程序、app-vue、app-nvue
bg-blue-1	background-color: #C3E7FE;	H5、小程序、app-vue、app-nvue
bg-blue-2	background-color: #9FD4FD;	H5、小程序、app-vue、app-nvue
bg-blue-3	background-color: #7BC0FC;	H5、小程序、app-vue、app-nvue
bg-blue-4	background-color: #57A9FB;	H5、小程序、app-vue、app-nvue
bg-blue-5	background-color: #3491FA;	H5、小程序、app-vue、app-nvue
bg-blue-6	background-color: #206CCF;	H5、小程序、app-vue、app-nvue
bg-blue-7	background-color: #114BA3;	H5、小程序、app-vue、app-nvue
bg-blue-8	background-color: #063078;	H5、小程序、app-vue、app-nvue
bg-blue-9	background-color: #001A4D;	H5、小程序、app-vue、app-nvue

Deepblue / 极致蓝

Class	Properties	平台兼容性说明
bg-deepblue-0	background-color: #E8F3FF;	H5、小程序、app-vue、app-nvue
bg-deepblue-1	background-color: #BEDAFF;	H5、小程序、app-vue、app-nvue
bg-deepblue-2	background-color: #94BFFF;	H5、小程序、app-vue、app-nvue
bg-deepblue-3	background-color: #61FF;	H5、小程序、app-vue、app-nvue
bg-deepblue-4	background-color: #4080FF;	H5、小程序、app-vue、app-nvue
bg-deepblue-5	background-color: #165DFF;	H5、小程序、app-vue、app-nvue
bg-deepblue-6	background-color: #0E42D2;	H5、小程序、app-vue、app-nvue
bg-deepblue-7	background-color: #072CA6;	H5、小程序、app-vue、app-nvue
bg-deepblue-8	background-color: #031A79;	H5、小程序、app-vue、app-nvue
bg-deepblue-9	background-color: #000D4D;	H5、小程序、app-vue、app-nvue

Purple / 暗夜紫

Class	Properties	平台兼容性说明
bg-purple-0	background-color: #F5E8FF;	H5、小程序、app-vue、app-nvue
bg-purple-1	background-color: #DDBEF6;	H5、小程序、app-vue、app-nvue
bg-purple-2	background-color: #C396ED;	H5、小程序、app-vue、app-nvue
bg-purple-3	background-color: #A871E3;	H5、小程序、app-vue、app-nvue
bg-purple-4	background-color: #8D4EDA;	H5、小程序、app-vue、app-nvue
bg-purple-5	background-color: #722ED1;	H5、小程序、app-vue、app-nvue
bg-purple-6	background-color: #551DB0;	H5、小程序、app-vue、app-nvue
bg-purple-7	background-color: #3C108F;	H5、小程序、app-vue、app-nvue
bg-purple-8	background-color: #27066E;	H5、小程序、app-vue、app-nvue
bg-purple-9	background-color: #16004D;	H5、小程序、app-vue、app-nvue

Pinkpurple / 青春紫

Class	Properties	平台兼容性说明
bg-pinkpurple-0	background-color: #FFE8FB;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-1	background-color: #F7BAEF;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-2	background-color: #F08EE6;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-3	background-color: #E865DF;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-4	background-color: #E13EDB;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-5	background-color: #D91AD9;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-6	background-color: #B010B6;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-7	background-color: #8A0993;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-8	background-color: #650370;	H5、小程序、app-vue、app-nvue
bg-pinkpurple-9	background-color: #42004D;	H5、小程序、app-vue、app-nvue

magenta / 品红色

Class	Properties	平台兼容性说明
bg-magenta-0	background-color: #FFE8F1;	H5、小程序、app-vue、app-nvue
bg-magenta-1	background-color: #FDC2DB;	H5、小程序、app-vue、app-nvue
bg-magenta-2	background-color: #FB9DC7;	H5、小程序、app-vue、app-nvue
bg-magenta-3	background-color: #F979B7;	H5、小程序、app-vue、app-nvue
bg-magenta-4	background-color: #F754A8;	H5、小程序、app-vue、app-nvue
bg-magenta-5	background-color: #F5319D;	H5、小程序、app-vue、app-nvue
bg-magenta-6	background-color: #CB1E83;	H5、小程序、app-vue、app-nvue
bg-magenta-7	background-color: #A11069;	H5、小程序、app-vue、app-nvue
bg-magenta-8	background-color: #77064F;	H5、小程序、app-vue、app-nvue
bg-magenta-9	background-color: #4D0034;	H5、小程序、app-vue、app-nvue

功能色

使用场景

0-白底悬浮
1-文字禁用
2-一般禁用
3-特殊场景
5-常规使用
6-点击状态

Primary-品牌色

Class	Properties	平台兼容性说明
bg-primary-0	background-color: #E8FFF3;	H5、小程序、app-vue、app-nvue
bg-primary-1	background-color: #B0F2D2;	H5、小程序、app-vue、app-nvue
bg-primary-2	background-color: #7DE4B6;	H5、小程序、app-vue、app-nvue
bg-primary-3	background-color: #4ED79E;	H5、小程序、app-vue、app-nvue
bg-primary-5	background-color: #00BC79;	H5、小程序、app-vue、app-nvue
bg-primary-6	background-color: #00A06D;	H5、小程序、app-vue、app-nvue

Success-成功色

Class	Properties	平台兼容性说明
bg-success-0	background-color: #E8FFF3;	H5、小程序、app-vue、app-nvue
bg-success-1	background-color: #B0F2D2;	H5、小程序、app-vue、app-nvue
bg-success-2	background-color: #7DE4B6;	H5、小程序、app-vue、app-nvue
bg-success-3	background-color: #4ED79E;	H5、小程序、app-vue、app-nvue
bg-success-5	background-color: #00BC79;	H5、小程序、app-vue、app-nvue
bg-success-6	background-color: #00A06D;	H5、小程序、app-vue、app-nvue

Danger / 危险色

Class	Properties	平台兼容性说明
bg-danger-0	background-color: #FFECE8;	H5、小程序、app-vue、app-nvue
bg-danger-1	background-color: #FDCDC5;	H5、小程序、app-vue、app-nvue
bg-danger-2	background-color: #FBACA3;	H5、小程序、app-vue、app-nvue
bg-danger-3	background-color: #F98981;	H5、小程序、app-vue、app-nvue
bg-danger-5	background-color: #F53F3F;	H5、小程序、app-vue、app-nvue
bg-danger-6	background-color: #CB272D;	H5、小程序、app-vue、app-nvue

Warning / 警告色

Class	Properties	平台兼容性说明
bg-warning-0	background-color: #FFF7E8;	H5、小程序、app-vue、app-nvue
bg-warning-1	background-color: #FFE4BA;	H5、小程序、app-vue、app-nvue
bg-warning-2	background-color: #FFCF8B;	H5、小程序、app-vue、app-nvue
bg-warning-3	background-color: #FFB65D;	H5、小程序、app-vue、app-nvue
bg-warning-5	background-color: #FF7D00;	H5、小程序、app-vue、app-nvue
bg-warning-6	background-color: #D25F00;	H5、小程序、app-vue、app-nvue

Link / 链接色

Class	Properties	平台兼容性说明
bg-link-0	background-color: #E8F7FF;	H5、小程序、app-vue、app-nvue
bg-link-1	background-color: #C3E7FE;	H5、小程序、app-vue、app-nvue
bg-link-2	background-color: #9FD4FD;	H5、小程序、app-vue、app-nvue
bg-link-3	background-color: #7BC0FC;	H5、小程序、app-vue、app-nvue
bg-link-5	background-color: #3491FA;	H5、小程序、app-vue、app-nvue
bg-link-6	background-color: #206CCF;	H5、小程序、app-vue、app-nvue

Info / 信息色

Class	Properties	平台兼容性说明
bg-info-0	background-color: #E8F7FF;	H5、小程序、app-vue、app-nvue
bg-info-1	background-color: #C3E7FE;	H5、小程序、app-vue、app-nvue
bg-info-2	background-color: #9FD4FD;	H5、小程序、app-vue、app-nvue
bg-info-3	background-color: #7BC0FC;	H5、小程序、app-vue、app-nvue
bg-info-5	background-color: #3491FA;	H5、小程序、app-vue、app-nvue
bg-info-6	background-color: #206CCF;	H5、小程序、app-vue、app-nvue

背景 ​

背景颜色 ​

使用前缀 ​

语法 ​

Grey / 中性灰 ​

Red / 浪漫红 ​

Orangered / 晚秋红 ​

Orange / 活力橙 ​

Gold / 黄昏色 ​

Yellow / 柠檬黄 ​

Lime / 新生绿 ​

Green / 翡翠绿 ​

Cyan / 碧涛青 ​

Blue / 海空蓝 ​

Deepblue / 极致蓝 ​

Purple / 暗夜紫 ​

Pinkpurple / 青春紫 ​

magenta / 品红色 ​

功能色 ​

Primary-品牌色 ​

Success-成功色 ​

Danger / 危险色 ​

Warning / 警告色 ​

Link / 链接色 ​

Info / 信息色 ​

背景

背景颜色

使用前缀

语法

Grey / 中性灰

Red / 浪漫红

Orangered / 晚秋红

Orange / 活力橙

Gold / 黄昏色

Yellow / 柠檬黄

Lime / 新生绿

Green / 翡翠绿

Cyan / 碧涛青

Blue / 海空蓝

Deepblue / 极致蓝

Purple / 暗夜紫

Pinkpurple / 青春紫

magenta / 品红色

功能色

Primary-品牌色

Success-成功色

Danger / 危险色

Warning / 警告色

Link / 链接色

Info / 信息色