背景色信息
主题背景颜色
图鸟内置的主题背景色类型包含: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>