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

本文介绍: 设置背景颜色 background–color 背景颜色 Back g round Col o r基础用法透明度自定义主题颜色其他用法背景图片 Back g round Im a g e基础用法图片大小 Bac kg roun d Size 渐变颜色基础用法渐变色标基础用法其他用法背景颜色 Bac kg round Col o r基础用法格式: bg-{颜色名}-{色号}示例: b g–gray-100 对应的是 background–color: rgb(243 244 246);颜色表: https://tailwind css.

1. 背景 颜色 Bac kg round Col o r

基础用法

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

透明度

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

自定义 主题颜色

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

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

&lt;button class="bg-regal-blue"&gt;Button&lt;/button&gt;

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

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

其他用法

Class名	属性	备注
`bg-inherit`	background–col o r: in he rit;	父级继承`background-color`属性
`bg-current`	background-c ol or: currentCo lor;	背景颜色设置为当前文字颜色
`bg-transparent`	background-co lor: transparent;	透明背景
`bg-black`	background-co lor: blac k;	黑色背景
`bg-white`	background-co lor: w hite;	白色背景

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>

Linear gradients

渐变色标

基础用法

格式: 开始颜色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>

Gradient Color Stops
在这里插入图片描述

其他用法

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	Descript ion	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	Properti es
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	Properti es
bg-fixed	background-attachment: fixed;
bg-local	background-attachment: local;
bg-scroll	background-attachment: sc roll;

8. 内容框 Background Origin

Class	Proper ti es
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>