Skip to content
On this page

背景色信息

主题背景颜色

图鸟内置的主题背景色类型包含:primarysuccesswarningdangererrorinfo

使用方法

在类型前加上tn-type-后面跟着_bg即可使用,如:

html
<div class="tn-type-primary_bg">primary</div>
<div class="tn-type-success_bg">success</div>
<div class="tn-type-warning_bg">warning</div>
<div class="tn-type-danger_bg">danger</div>
<div class="tn-type-error_bg">error</div>
<div class="tn-type-info_bg">info</div>
<div class="tn-type-primary_bg">primary</div>
<div class="tn-type-success_bg">success</div>
<div class="tn-type-warning_bg">warning</div>
<div class="tn-type-danger_bg">danger</div>
<div class="tn-type-error_bg">error</div>
<div class="tn-type-info_bg">info</div>

内置背景颜色

图鸟内置的背景颜色包含:redpurpleredpurplebluepurpleaquablueblueindigocyantealgreenyellowgreenlimeyelloworangeyelloworangeorangeredbrowngreygray

内置颜色中包含了以下的可选参数: disableddarklight

使用方法

在颜色值前加上tn-后面跟着_bg即可使用,如果需要使用可选参数则在颜色值后加-[可选参数]如:

html
<div class="tn-red_bg">red</div>
<div class="tn-red-disabled_bg">red-disabled</div>
<div class="tn-red-dark_bg">red-dark</div>
<div class="tn-red-light_bg">red-light</div>
<div class="tn-purplered_bg">purplered</div>
<div class="tn-purple_bg">purple</div>
...
<div class="tn-red_bg">red</div>
<div class="tn-red-disabled_bg">red-disabled</div>
<div class="tn-red-dark_bg">red-dark</div>
<div class="tn-red-light_bg">red-light</div>
<div class="tn-purplered_bg">purplered</div>
<div class="tn-purple_bg">purple</div>
...

内置背景颜色渐变色

使用背景色做为渐变色,可以通过tn-gradient-bg__(内置颜色值)[-light|-single],如:

html
<div class="tn-gradient-bg__red">red</div>
<div class="tn-gradient-bg__red-light">red-light</div>
<div class="tn-gradient-bg__red-single">red-single</div>
...
<div class="tn-gradient-bg__red">red</div>
<div class="tn-gradient-bg__red-light">red-light</div>
<div class="tn-gradient-bg__red-single">red-single</div>
...

注意

orangeredbrowngray中没有lightsingle的渐变色

内置酷炫渐变背景色

图鸟中内置了一些酷炫的背景颜色,可以通过tn-gradient-bg__cool-(1-16),如:

html
<div class="tn-gradient-bg__cool-1">cool-1</div>
<div class="tn-gradient-bg__cool-2">cool-2</div>
...
<div class="tn-gradient-bg__cool-16">cool-16</div>
<div class="tn-gradient-bg__cool-1">cool-1</div>
<div class="tn-gradient-bg__cool-2">cool-2</div>
...
<div class="tn-gradient-bg__cool-16">cool-16</div>

内置背景图片

仅需要在需要添加背景图片的背景上加tn-bg-image即可,如:

html
<div class="tn-gradient-bg__cool-1 tn-bg-image"></div>
<div class="tn-gradient-bg__cool-1 tn-bg-image"></div>

颜色展示

Tuniao UI