背景
用于控制元素背景图像大小的工具类。
类 | 样式 |
---|---|
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>
在变体文档中了解更多关于使用变体的信息。