笙亿网络策划

Tailwind CSS background-clip 属性怎么用？背景裁剪效果如何实现？

约 5 分钟读完 1 阅
文章导读
Previous Quiz Next Tailwind CSS Background Clip 是一个用于指定元素内 background 的裁剪行为的 utility。
📋 目录
  1. Ⅰ Tailwind CSS Background Clip 类
  2. Ⅱ Tailwind CSS Background Clip 类的功能
  3. Ⅲ Tailwind CSS Background Clip 示例
A A

Tailwind CSS - Background Clip

Previous
Quiz
Next

Tailwind CSS Background Clip 是一个用于指定元素内 background 的裁剪行为的 utility。

Tailwind CSS Background Clip 类

以下是用于设置 background 裁剪行为的 Tailwind CSS Background Clip 类列表。

Class CSS Properties
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 Background Clip 类的功能

  • bg-clip-border: 该类用于将 background 裁剪到 border box，使 background 属性覆盖整个容器，包括 border 和 padding。
  • bg-clip-padding: 该类用于将 background 裁剪到 padding box，使 background 属性覆盖整个容器但排除 border。
  • bg-clip-content: 该类用于将 background 裁剪到 content box，使 background 属性仅覆盖内容区域，排除 border 和 padding。
  • bg-clip-text: 该类用于将 background 裁剪到文本，仅在文本内部设置 background 属性。

Tailwind CSS Background Clip 示例

以下示例将演示 Background Clip 类不同的 utility。

示例

<!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')"
    >
        
    </div>
</body>

</html>