Tailwind CSS - Background Repeat
Tailwind CSS Background Repeat 是一个实用程序，用于指定元素内背景图像的重复行为。
Tailwind CSS Background Repeat 类
以下是用于设置背景图像重复的 Tailwind CSS Background Origin 类列表。
| 类 | 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>
