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:google- 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:tumblr- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:behance- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:messager.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:yahoo- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:vue- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:react- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bgc:angular- 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 |