TailwindCSS 3.0 (二) 设置背景颜色和背景图片的方法

1. 背景颜色 Background Color

基础用法

格式: bg-{颜色名}-{色号}
示例: bg-gray-100 对应的是 background-color: rgb(243 244 246);
颜色表: https://tailwindcss.com/docs/background-color

透明度

格式: bg-{颜色名}-{色号}-{透明度}
示例: bg-sky-500/100

自定义主题颜色

方法一: 在tailwind.config.js文件中的theme.colors或theme.extend.colors定义自定义颜色

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

<button class="bg-regal-blue">Button</button>

方法二: 使用bg-[{Hex颜色}]的方式

<p class="bg-[#50d71e]">
  <!-- ... -->
</p>

其他用法

Class名	属性	备注
bg-inherit	background-color: inherit;	父级继承background-color属性
bg-current	background-color: currentColor;	背景颜色设置为当前文字颜色
bg-transparent	background-color: transparent;	透明背景
bg-black	background-color: black;	黑色背景
bg-white	background-color: white;	白色背景

2. 渐变颜色

基础用法

格式: 使用bg-gradient-{方向}格式, 先设置渐变的方向, 然后加上渐变色标.
示例:

<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>

渐变色标

基础用法

格式: 开始颜色from-{color}, 结束颜色to-{color}, 中间颜色via-{color}
示例:

<div class="bg-gradient-to-r from-cyan-500 to-blue-500 ..."></div>
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>

其他用法

Class	备注
from-inherit via-inherit to-inherit	继承父级背景
from-current via-current to-current	使用当前文字颜色
from-transparent via-transparent to-transparent	透明
from-black via-black to-black	黑色
from-white via-white to-white	白色

3. 背景图片 Background Image

格式: bg-[url('图片路径')]
示例:

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

4. 背景大小 Background Size

Class	Description	e.g.
bg-auto	background-size: auto;
bg-cover	background-size: cover;
bg-contain	background-size: contain;

5. 重复背景 Background Repeat

基础用法

格式: bg-repeat

<div class="bg-repeat ..." style="background-image: url(...)"></div>

不重复

格式: bg-no-repeat

<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>

横向重复

格式: bg-repeat-x

<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>

竖向重复

格式: bg-repeat-y

<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>

6. 图片位置 Background Position

Class	Properties
bg-bottom	background-position: bottom;
bg-center	background-position: center;
bg-left	background-position: left;
bg-left-bottom	background-position: left bottom;
bg-left-top	background-position: left top;
bg-right	background-position: right;
bg-right-bottom	background-position: right bottom;
bg-right-top	background-position: right top;
bg-top	background-position: top;

<div class="bg-no-repeat bg-left-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-center ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-bottom ..." style="background-image: url(...);"></div>

7. 背景图固定 Background Attachment

Class	Properties
bg-fixed	background-attachment: fixed;
bg-local	background-attachment: local;
bg-scroll	background-attachment: scroll;

8. 内容框 Background Origin

Class	Properties
bg-origin-border	background-origin: border-box;
bg-origin-padding	background-origin: padding-box;
bg-origin-content	background-origin: content-box;

<div class="bg-origin-border p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-padding p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-content p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>

9. 绘制区域 Background Clip

Class	Properties
bg-clip-border	background-clip: border-box;
bg-clip-padding	background-clip: padding-box;
bg-clip-content	background-clip: content-box;
bg-clip-text	background-clip: text;

<div class="bg-clip-border p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-content p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="text-5xl font-extrabold ...">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
    Hello world
  </span>
</div> 

参考链接:
[1]: https://www.bilibili.com/video/BV1NK4y1p7RT
[2]: https://tailwindcss.com/docs/background-color