背景
background-size
用于控制元素背景图片的背景大小的工具。
类 | 样式 |
---|---|
bg-auto | background-size: auto; |
bg-cover | background-size: cover; |
bg-contain | background-size: contain; |
bg-(length:<custom-property>) | background-size: var(<custom-property>); |
bg-[<value>] | background-size: <value>; |
示例(Examples)
¥Examples
填充容器(Filling the container)
¥Filling the container
使用 bg-cover
工具缩放背景图片直到它填满背景层,如果需要则裁剪图片需要:
¥Use the bg-cover
utility to scale the background image until it fills the background layer, cropping the image if needed:
<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>
填充而不裁剪(Filling without cropping)
¥Filling without cropping
使用 bg-contain
工具将背景图片缩放到外边缘而不裁剪或拉伸:
¥Use the bg-contain
utility to scale the background image to the outer edges without cropping or stretching:
<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>
使用默认大小(Using the default size)
¥Using the default size
使用 bg-auto
工具以默认大小显示背景图片:
¥Use the bg-auto
utility to display the background image at its default size:
<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>
使用自定义值(Using a custom value)
¥Using a custom value
使用 bg-[<value>]
语法 根据完全自定义的值设置 background image size:
<div class="bg-[auto_100px] ..."> <!-- ... --></div>
对于 CSS 变量,还可以使用 bg-(length:<custom-property>)
语法:
<div class="bg-(length:--my-image-size) ..."> <!-- ... --></div>
这只是简写,用于 bg-[length:var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 background-size
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="bg-auto md:bg-contain ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。