1. 背景
  2. background-size

背景

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>

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号