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>

打印页面