背景
用于控制元素背景图像背景尺寸的实用工具。
类名 | 样式 |
---|---|
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
实用工具缩放背景图像,直到它填充背景层,并在需要时裁剪图像
<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-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()
函数。
前缀一个 background-size
实用工具 带有断点变体的,例如 md:
,仅在medium 屏幕尺寸及以上应用该实用工具
<div class="bg-auto md:bg-contain ..."> <!-- ... --></div>
在变体文档中了解更多关于使用变体的信息。