Tailwind CSS - 背景尺寸

Tailwind CSS 背景尺寸是一个实用程序，用于指定背景图像的大小。

Tailwind CSS 背景尺寸类

以下是用于设置背景图像大小的Tailwind CSS 背景尺寸类的列表。

类	CSS 属性
bg-auto	background-size: auto;
bg-cover	background-size: cover;
bg-contain	background-size: contain;

Tailwind CSS 背景尺寸类的功能

bg-auto: 此类用于将背景图像设置为其默认大小。
bg-cover: 此类调整背景图像以覆盖整个容器，确保没有额外的空间可用。
bg-contain: 此类调整背景图像以适合容器，而不会裁剪和拉伸。

Tailwind CSS 背景尺寸示例

以下示例将说明背景图像的不同调整方式。

背景图像的默认大小

以下示例说明了bg-auto类的用法。

示例

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Auto Class
    </h2>
    <div class="w-5/6 h-56 border-2 bg-auto bg-no-repeat
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

将背景图像设置为覆盖

以下示例说明了bg-cover类的用法。

示例

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Cover Class
    </h2>
    <div class="w-5/6 h-56 border-2 bg-cover bg-no-repeat
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

将背景图像设置为包含

以下示例说明了bg-contain类的用法。

示例

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Contain Class
    </h2>
    <div class="w-5/6 h-56 border-2 bg-contain bg-no-repeat
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

打印页面