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>

列印頁面