Tailwind CSS - 背景重複

Tailwind CSS 背景重複是一個實用程式，用於指定元素內背景影像的重複行為。

Tailwind CSS 背景重複類

以下是用於設定背景影像重複的Tailwind CSS 背景原點類的列表。

類名	CSS 屬性
bg-repeat	background-repeat: repeat;
bg-no-repeat	background-repeat: no-repeat;
bg-repeat-x	background-repeat: repeat-x;
bg-repeat-y	background-repeat: repeat-y;
bg-repeat-round	background-repeat: round;
bg-repeat-space	background-repeat: space;

Tailwind CSS 背景重複類的功能

bg-repeat: 此類用於垂直和水平重複背景影像。
bg-no-repeat: 此類用於防止背景影像重複。
bg-repeat-x: 此類用於水平重複背景影像。
bg-repeat-y: 此類用於垂直重複背景影像。
bg-repeat-round: 此類用於重複背景影像，使其適合容器內部，影像之間沒有額外的空間。
bg-repeat-space: 此類用於重複背景影像，使其適合容器內部，影像之間有額外的空間。

Tailwind CSS 背景重複示例

以下示例將演示元素內背景影像的不同重複行為。

重複背景影像

以下示例演示了bg-repeat類的用法。

示例

<!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 Repeat Class
    </h2>
    <div class="w-full h-72 bg-repeat border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

防止背景影像重複

以下示例演示了bg-no-repeat類的用法。

示例

<!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 No Repeat Class
    </h2>
    <div class="w-full h-72 bg-no-repeat border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

水平重複背景影像

以下示例演示了bg-repeat-x類的用法。

示例

<!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 Repeat X Class
    </h2>
    <div class="w-full h-72 bg-repeat-x border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

垂直重複背景影像

以下示例演示了bg-repeat-y類的用法。

示例

<!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 Repeat Y Class
    </h2>
    <div class="w-full h-72 bg-repeat-y border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

消除背景影像之間的額外空間

以下示例演示瞭如何使用bg-repeat-round 類。

示例

<!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 Repeat Round Class
    </h2>
    <div class="w-full h-72 bg-repeat-round border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

在背景影像之間新增額外空間

以下示例演示瞭如何使用bg-repeat-space 類。

示例

<!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 Repeat Space Class
    </h2>
    <div class="w-full h-72 bg-repeat-space border-2  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

列印頁面