Tailwind CSS 背景图片

在传统 CSS 中，背景图片一般需要编写冗长的 background-image: url(...)，而 Tailwind CSS 却把一切给简化了。

Tailwind CSS 背景图片语法

在 Tailwind CSS 中，我们可以使用 “任意值” 的语法来定义元素的背景图片（相当于传统 CSS 中的 background-image）。

语法：

bg-[url('图片路径')]

说明：

我们只需要将图片的地址（本地路径或网络链接）放在中括号里的 url() 函数中即可。

在实际开发中，单纯设置背景图片往往是不够的，因此图片可能会因为尺寸不合而显示不全或重复。因此，我们通常会配合以下类名使用：

“背景图片” 类名
类名	对应 CSS	说明
bg-cover	background-size: cover;	缩放图片，以完全覆盖容器
bg-contain	background-size: contain;	缩放图片以完整显示
bg-auto	background-size: auto;	保持图片原始大小
bg-center	background-position: center;	让图片在容器中居中显示
bg-no-repeat	background-repeat: no-repeat;	防止图片在容器中重复平铺
bg-fixed	background-attachment: fixed;	背景固定，不随页面滚动
bg-scroll	background-attachment: scroll;	背景随页面内容一起滚动

Tailwind CSS 背景图片示例

接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来定义元素的背景图片。

示例：定义背景图片

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
    <div class="w-full h-64 bg-[url('https://picsum.photos/800/400')] bg-cover bg-center rounded-xl">
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS 定义背景图片

分析：

在这个例子中，我们使用了 3 个关键类名来实现背景图片效果。

bg-[url(...)]：使用任意值语法引入一张随机的网络图片。
bg-cover：保证无论这个 div 的宽高如何变化，图片都会等比例缩放并填满整个格子，而不会留下难看的白边。
bg-center：确保图片的中心位置始终显示在容器中央，避免由于裁剪导致图片看不见。

Lorem Picsum

Lorem Picsum（地址：https://picsum.photos），是一个专门为开发者和设计师提供 “免费随机占位图片” 的服务网站。

在开发网页或设计 App 时，如果你暂时还没有准备好真实的图片素材，可以使用 Lorem Picsum 提供的免费占位图片，比如：

https://picsum.photos/800/400

上面这个链接会生成一个宽度为 800px、高度为 400px 的图片。并且每次请求这个链接，它都会随机返回一张相同尺寸但内容不同的高质量照片。