背景
background-size
用于控制元素背景图像大小的工具类。
| 类 | 样式 |
|---|---|
bg-auto | background-size: auto; |
bg-cover | background-size: cover; |
bg-contain | background-size: contain; |
bg-(<自定义属性>) | background-size: var(<自定义属性>); |
bg-[<值>] | background-size: <值>; |
示例
填充容器
使用 bg-cover 工具类来缩放背景图像，直到它填充背景图层，如果需要，会裁剪图像
<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>填充但不裁剪
使用 bg-contain 工具类来缩放背景图像到外部边缘，而不进行裁剪或拉伸
<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>使用默认大小
使用 bg-auto 工具类以其默认大小显示背景图像
<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>使用自定义值
使用 bg-[<值>] 语法 来设置背景图像大小基于完全自定义的值
<div class="bg-[200px_100px] ..."> <!-- ... --></div>对于 CSS 变量，您还可以使用 bg-(<自定义属性>) 语法
<div class="bg-(--my-image-size) ..."> <!-- ... --></div>这只是 bg-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。
响应式设计
前缀使用 background-size 工具类 并添加诸如 md: 的断点变体，以便仅在中等 屏幕尺寸及以上应用该工具类
<div class="bg-auto md:bg-contain ..."> <!-- ... --></div>在变体文档中了解更多关于使用变体的信息。
