Background

各種有關背景相關設定的工具類別。


Color

background-color

用來設定各種物件的背景色,背景色通用類別會依照顏色設定相對應的文字顏色。基本色、色票群與品牌色於背景色類別名稱的前綴詞為 .u-bgc:;灰階類別名稱為 .u-bgk:

基本色
.u-bgc:primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:secondary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:dark
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:light
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

狀態色
.u-bgc:success
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

色票群
.u-bgc:red
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:orange
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:fire
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:yellow
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:olive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:sapphire
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:cyan
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:magenta
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:bone
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:silver
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:momo
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:rosewood
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:skin
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:chartreuse
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:green
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:aegean
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:blue
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:violet
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:brown
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:gray
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:black
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

品牌色
.u-bgc:youtube
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:googleplus
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:pinterest
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:weibo
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:rss
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:snapchat
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:whatsapp
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:wechat
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:line
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:slack
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:behance
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:messager
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:skype
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:dropbox
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:viemo
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:twitter
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:linkedin
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:facebook
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:vk
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:paypal
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:tumble
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

無彩度
.u-bgk:0
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:5
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:8
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:10
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:12
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:15
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:20
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:30
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:40
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:50
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:60
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:70
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:80
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:90
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgk:100
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Position

background-position

設定背景位置,當有兩個值合併時表示為:(xy)。使用類別為 .u-bg-pos:

類別名稱
.u-bg-pos:t top
.u-bg-pos:b bottom
.u-bg-pos:c center
中上 .u-bg-pos:ct center top
中下 .u-bg-pos:cb center bottom
.u-bg-pos:l left
左上 .u-bg-pos:lt left top
左中 .u-bg-pos:lc left center
左下 .u-bg-pos:lb left bottom
.u-bg-pos:r right
右上 .u-bg-pos:rt right top
右中 .u-bg-pos:rc right center
右下 .u-bg-pos:rb right bottom

Repeat

background-repeat

設定背景顯示方式是否重複。使用類別為 .u-bg-rpt:

類別名稱
重複 .u-bg-rpt:r repeat
不重複 .u-bg-rpt:nr no-repeat
水平重複 .u-bg-rpt:rx repeat-x
垂直重複 .u-bg-rpt:ry repeat-y
依計算重複 .u-bg-rpt:rd round
Space .u-bg-rpt:sp space

Size

background-size

設定背景圖大小呈現方式。使用類別為 .u-bg-sz:

類別名稱
自動 .u-bg-sz:at auto
滿版 .u-bg-sz:cv cover
自適應 .u-bg-sz:ct contain