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

您所在的位置：网站首页 › 照片如何调整背景颜色 › TailwindCSS 3.0 (二) 设置背景颜色和背景图片的方法

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

2023-08-04 15:49| 来源: 网络整理| 查看: 265

设置背景颜色 background-color 1. 背景颜色 Background Color基础用法透明度自定义主题颜色其他用法 2. 渐变颜色基础用法渐变色标基础用法其他用法 3. 背景图片 Background Image4. 背景大小 Background Size5. 重复背景 Background Repeat基础用法不重复横向重复竖向重复 6. 图片位置 Background Position7. 背景图固定 Background Attachment8. 内容框 Background Origin9. 绘制区域 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 Background Color

自定义主题颜色

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

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

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

其他用法 Class名属性备注bg-inheritbackground-color: inherit;父级继承background-color属性bg-currentbackground-color: currentColor;背景颜色设置为当前文字颜色bg-transparentbackground-color: transparent;透明背景bg-blackbackground-color: black;黑色背景bg-whitebackground-color: white;白色背景 2. 渐变颜色基础用法

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

Linear gradients

渐变色标基础用法

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

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('图片路径')] 示例:

4. 背景大小 Background Size ClassDescriptione.g.bg-autobackground-size: auto;

bg-coverbackground-size: cover;

bg-containbackground-size: contain;

5. 重复背景 Background Repeat 基础用法

格式: bg-repeat

在这里插入图片描述

不重复

格式: bg-no-repeat

在这里插入图片描述

横向重复

格式: bg-repeat-x

在这里插入图片描述

竖向重复

格式: bg-repeat-y

在这里插入图片描述

6. 图片位置 Background Position ClassPropertiesbg-bottombackground-position: bottom;bg-centerbackground-position: center;bg-leftbackground-position: left;bg-left-bottombackground-position: left bottom;bg-left-topbackground-position: left top;bg-rightbackground-position: right;bg-right-bottombackground-position: right bottom;bg-right-topbackground-position: right top;bg-topbackground-position: top;

在这里插入图片描述

7. 背景图固定 Background Attachment ClassPropertiesbg-fixedbackground-attachment: fixed;bg-localbackground-attachment: local;bg-scrollbackground-attachment: scroll; 8. 内容框 Background Origin ClassPropertiesbg-origin-borderbackground-origin: border-box;bg-origin-paddingbackground-origin: padding-box;bg-origin-contentbackground-origin: content-box;

在这里插入图片描述

9. 绘制区域 Background Clip ClassPropertiesbg-clip-borderbackground-clip: border-box;bg-clip-paddingbackground-clip: padding-box;bg-clip-contentbackground-clip: content-box;bg-clip-textbackground-clip: text; Hello world

在这里插入图片描述

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

【本文地址】

公司简介

联系我们