Tailwind CSS - Background Clip
Tailwind CSS Background Clip 是一个用于指定元素内背景裁剪行为的实用程序。
Tailwind CSS Background Clip 类
以下是用于设置背景裁剪行为的 Tailwind CSS Background Clip 类列表。
| 类 | CSS 属性 |
|---|---|
| bg-clip-border | background-clip: border-box; |
| bg-clip-padding | background-clip: padding-box; |
| bg-clip-content | background-clip: content-box; |
| bg-clip-text | background-clip: text; |
Tailwind CSS 背景裁剪类的功能
- bg-clip-border 此类用于将背景裁剪到边框框，设置整个容器(包括边框和内边距)的 background 属性。
- bg-clip-padding 此类用于将背景裁剪到内边距框，设置整个容器(边框除外)的 background 属性。
- bg-clip-content 此类用于将背景裁剪到内容框，设置内容(边框和内边距除外)的 background 属性。
- bg-clip-text 此类用于将背景裁剪到文本，仅在文本内设置 background 属性。
Tailwind CSS 背景裁剪示例
以下示例将说明背景裁剪的不同用途类。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-3">
Tailwind CSS Background Clip Border, Padding, and Content Classes
</h2>
<div class="flex gap-3">
<div class="w-32 h-32 border-4 border-green-300 border-dashed
bg-clip-border bg-green-600 p-4 text-white">
Background-clip-border
</div>
<div class="w-32 h-32 border-4 border-green-300 border-dashed
bg-clip-padding bg-green-600 p-4 text-white">
Background-clip-padding
</div>
<div class="w-32 h-32 border-4 border-green-300 border-dashed
bg-clip-content bg-green-600 p-4 text-white">
Background-clip-content
</div>
</div>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-5 text-center">
Tailwind CSS Background Clip Text Classes
</h2>
<div class="text-6xl text-center font-extrabold
text-transparent bg-clip-text"
style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')"
>
Tutorialspoint
</div>
</body>
</html>
