背景色信息
主题背景颜色
图鸟内置的主题背景色类型包含:primary、success、warning、danger、error、info
使用方法
在类型前加上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>内置背景颜色
图鸟内置的背景颜色包含:red、purplered、purple、bluepurple、aquablue、blue、indigo、cyan、teal、green、yellowgreen、lime、yellow、orangeyellow、orange、orangered、brown、grey、gray
内置颜色中包含了以下的可选参数: disabled、dark、light
使用方法
在颜色值前加上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>
...注意
orangered、brown、gray中没有light、single的渐变色
内置酷炫渐变背景色
图鸟中内置了一些酷炫的背景颜色,可以通过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>