Class saturate của Tailwind CSS là một hàm tích hợp dùng để tăng giảm độ bão hòa ảnh. Trong CSS, ta dùng CSS saturate() Function. Tailwind CSS đã thêm tính năng brightness trong phiên bản 2.1.
Saturate Classes (Các class Saturate):
- saturate-0: Class này dùng để đặt giá trị saturate tương đương CSS saturate(0).
- saturate-50: Class này dùng để đặt giá trị saturate tương đương CSS saturate(50).
- saturate-100: Class này dùng để đặt giá trị saturate tương đương CSS saturate(100).
- saturate-150: Class này dùng để đặt giá trị saturate tương đương CSS saturate(150).
- saturate-200: Class này dùng để đặt giá trị saturate tương đương CSS saturate(200).
Syntax (Cú pháp):
<element class="filter saturate-{amount}">..</element>
Example (Ví dụ):
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2.1/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 Saturate Class</b>
<div class="grid grid-flow-col text-center p-4">
<img class="rounded-lg filter saturate-0"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg"
alt="image">
<img class="rounded-lg filter saturate-50"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg"
alt="image">
<img class="rounded-lg filter saturate-75"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg"
alt="image">
<img class="rounded-lg filter saturate-110"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg"
alt="image">
<img class="rounded-lg filter saturate-200"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg"
alt="image">
</div>
</body>
</html>
Output (Kết quả):
