TailwindCSS 3.0 (二) 設定背景顔色和背景圖檔的方法

設定背景顔色 background-color

• 1. 背景顔色 Background Color
• • 基礎用法
  • 透明度
  • 自定義主題顔色
  • 其他用法
• 2. 漸變顔色
• • 基礎用法
  • 漸變色标
  • • 基礎用法
    • 其他用法
• 3. 背景圖檔 Background Image
• 4. 背景大小 Background Size
• 5. 重複背景 Background Repeat
• • 基礎用法
  • 不重複
  • 橫向重複
  • 豎向重複
• 6. 圖檔位置 Background Position
• 7. 背景圖固定 Background Attachment
• 8. 内容框 Background Origin
• 9. 繪制區域 Background Clip

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',
      },
    }
  }
}
           

方法二: 使用

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

不重複

格式:

bg-no-repeat

橫向重複

格式:

bg-repeat-x

豎向重複

格式:

bg-repeat-y

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