Tailwind CSS 背景大小

在 Tailwind CSS 中，我们可以使用 bg- 前缀来设置背景颜色，也可以使用 bg-opacity- 来设置不透明度。除此之外，Tailwind CSS 还提供了一些设置背景大小的类。

背景大小

我们可以使用以下类来设置背景大小：

• bg-contain：背景图像尽可能大地显示在容器中而不被裁剪，同时仍然保持图像的纵横比。
• bg-cover：背景图像尽可能大地覆盖容器的整个区域，通常是容器的边界。如果容器的纵横比与图像的纵横比不同，则图像会被裁剪以适应容器。
• bg-top：背景图像位于容器的顶部。
• bg-bottom：背景图像位于容器的底部。
• bg-left：背景图像位于容器的左侧。
• bg-right：背景图像位于容器的右侧。
• bg-center：背景图像位于容器的中心。

示例

<div class="h-64 w-64 bg-cover bg-center" style="background-image:url('https://via.placeholder.com/150')">
</div>

以上代码会生成一个高度为 64px，宽度为 64px 的 div 元素，背景图片采用 cover 的方式填充容器，并在中心显示。

结论

通过 Tailwind CSS 提供的一些背景大小的类，我们可以很容易地实现各种样式需求。