background-size

用于控制元素背景图片尺寸的工具类。

快速参考

类	属性
bg-auto	background-size: auto;
bg-cover	background-size: cover;
bg-contain	background-size: contain;
bg-size-(<custom-property>)	background-size: var(<custom-property>);
bg-size-[<value>]	background-size: <value>;

示例

填满容器

使用 bg-cover 工具类缩放背景图片直到填满背景层，必要时裁剪图片：

<!-- [!code classes:bg-cover] -->
<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>

填满且不裁剪

使用 bg-contain 工具类将背景图片缩放到外边缘，不裁剪也不拉伸：

<!-- [!code classes:bg-contain] -->
<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>

使用默认尺寸

使用 bg-auto 工具类以默认尺寸显示背景图片：

<!-- [!code classes:bg-auto] -->
<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>

使用自定义值

使用 bg-size-[<value>] 等工具类，根据完全自定义的值设置背景尺寸：

<div class="bg-size-[auto_100px] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 bg-size-(<custom-property>) 语法：

<div class="bg-size-(--my-image-size) ...">
 <!-- ... -->
</div>

这只是 bg-size-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 background-size 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

<div class="bg-auto md:bg-contain ...">
 <!-- ... -->
</div>

更多关于变体的用法，请参阅变体文档。