背景颜色 bg

容器的背景表现,class控制。一些组件包含了通用属性 bg 也是用的这些类。

基础背景色

.bg-{color} 基础的背景颜色。点击色块，可复制到剪切板

明黄

#fbbd08.bg-yellow

橘橙

#f37b1d.bg-orange

嫣红

#e54d42.bg-red

桃粉

#e03997.bg-pink

木槿

#b745cb.bg-mauve

姹紫

#905ddf.bg-purple

海蓝

#0081ff.bg-blue

天青

#1cbbb4.bg-cyan

森绿

#3eb93b.bg-green

橄榄

#8dc63f.bg-olive

玄灰

#8799a3.bg-grey

棕褐

#a5673f.bg-brown

淡色背景

.bg-{color}-thin 更浅的颜色。为适应暗色主题,注意有透明度。点击色块，可复制到剪切板

明黄

.bg-yellow-thin

橘橙

.bg-orange-thin

嫣红

.bg-red-thin

桃粉

.bg-pink-thin

木槿

.bg-mauve-thin

姹紫

.bg-purple-thin

海蓝

.bg-blue-thin

天青

.bg-cyan-thin

森绿

.bg-green-thin

橄榄

.bg-olive-thin

玄灰

.bg-grey-thin

棕褐

.bg-brown-thin

渐变背景色

.bg-{color}-gradient 精心调整的色值，更加自然的过渡色。点击色块，可复制到剪切板

明黄

.bg-yellow-gradient

橘橙

.bg-orange-gradient

嫣红

.bg-red-gradient

桃粉

.bg-pink-gradient

木槿

.bg-mauve-gradient

姹紫

.bg-purple-gradient

海蓝

.bg-blue-gradient

天青

.bg-cyan-gradient

森绿

.bg-green-gradient

橄榄

.bg-olive-gradient

玄灰

.bg-grey-gradient

棕褐

.bg-brown-gradient

过渡渐变色

.bg-{color}-{color} 支持所有基础色到基础色的渐变。

高亮色

.bg-{color}-light 带有一定色彩的高亮背景。在深浅主题下保持一致。点击色块，可复制到剪切板

明黄

.bg-yellow-light

橘橙

.bg-orange-light

嫣红

.bg-red-light

桃粉

.bg-pink-light

木槿

.bg-mauve-light

姹紫

.bg-purple-light

海蓝

.bg-blue-light

天青

.bg-cyan-light

森绿

.bg-green-light

橄榄

.bg-olive-light

玄灰

.bg-grey-light

棕褐

.bg-brown-light

浅色灰度值

.bg-{gray} #aaaaaa ~ #ffffff 的浅色灰度值。点击色块，可复制到剪切板

white

gray-f

gray-e

gray-d

gray-c

gray-b

gray-a

深色灰度值

.bg-{dark} #999999 ~ #000000 的深色灰度值。点击色块，可复制到剪切板

dark-9

dark-8

dark-7

dark-6

dark-5

dark-4

dark-3

dark-2

dark-1

black

主题主色背景

.ui-BG-Main-{No}

a

b

c

d

主题层级背景

.{level}-bg .{level}-bg-sub

page

box

menu

page

box

menu

背景遮罩

.bg-mask-{opacity} 占用after伪元素的遮罩层

背景图片

.bg-img 自适应背景图片

模糊背景

.bg-blur 高斯模糊背景。 (存在兼容性！ios设备和安卓10以上才支持。)

条纹背景

.bg-stripes-{color} ，此为扩展class

明黄

.bg-stripes-yellow

橘橙

.bg-stripes-orange

嫣红

.bg-stripes-red

桃粉

.bg-stripes-pink

木槿

.bg-stripes-mauve

姹紫

.bg-stripes-purple

海蓝

.bg-stripes-blue

天青

.bg-stripes-cyan

森绿

.bg-stripes-green

橄榄

.bg-stripes-olive

玄灰

.bg-stripes-grey

棕褐

.bg-stripes-brown

复制成功