Lớp này chấp nhận nhiều giá trị trong tailwind CSS, tất cả thuộc tính được bao phủ dưới dạng class. Nó là một lựa chọn thay thế cho thuộc tính CSS background-clip. Thuộc tính này dùng để xác định cách mở rộng background trong một phần tử.
Các Class Background Clip:
| Tên Class | Mô tả |
|---|---|
bg-clip-border | Class này dùng để đặt màu nền lan rộng trên toàn bộ vùng. |
bg-clip-padding | Class này dùng để đặt nền bên trong đường viền. |
bg-clip-content | Class này dùng để đặt màu nền chỉ cho nội dung. |
bg-clip-text | Class này được dùng để cắt nền của một phần tử theo hình dạng văn bản. Nó rất hữu ích cho các hiệu ứng mà bạn muốn hình nền hiển thị xuyên qua văn bản. |
Cú pháp
<element class="bg-clip-{Clip type}">...</element>Ví dụ: Trong ví dụ này chúng ta sử dụng Tailwind CSS để tạo kiểu. Nó bao gồm một tiêu đề lớn, văn bản được tạo kiểu với gradient background clipping và ba thẻ div. Các thẻ div này thể hiện các hiệu ứng background clip khác nhau trong bố cục lưới.
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS
<span class="bg-clip-text text-lg text-transparent
bg-gradient-to-r
from-green-400 to-blue-500">
Background Clip Class
</span>
</b>
<div class="mx-2 grid grid-cols-3 gap-2 bg-green-200 rounded-lg">
<div class="bg-clip-border p-6 bg-green-600 border-dashed
border-4 border-green-300">
</div>
<div class="bg-clip-padding p-6 bg-green-600 border-dashed
border-4 border-green-300">
</div>
<div class="bg-clip-content p-6 bg-green-600 border-dashed
border-4 border-green-300">
</div>
</div>
</body>
</html>
Đầu ra:
