Class Contrast được dùng để thiết lập độ tương phản của ảnh. Class này có thể tăng hoặc giảm độ tương phản. Trong CSS, chúng ta dùng CSS Contrast() Function. Tailwind CSS đã thêm thuộc tính brightness mới trong phiên bản 2.1.
Độ tương phản:
- Contrast-0: Class này dùng để đặt độ tương phản tương đương CSS
contrast(0). - Contrast-50: Class này dùng để đặt độ tương phản tương đương CSS
contrast(0.5). - Contrast-75: Class này dùng để đặt độ tương phản tương đương CSS
contrast(0.75). - Contrast-100: Class này dùng để đặt độ tương phản tương đương CSS
contrast(1.0). - Contrast-125: Class này dùng để đặt độ tương phản tương đương CSS
contrast(1.25). - Contrast-150: Class này dùng để đặt độ tương phản tương đương CSS
contrast(1.50). - Contrast-200: Class này dùng để đặt độ tương phản tương đương CSS
contrast(2.0).
Cú pháp:
<element class="filter Contrast-{amount}">..</element>
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 contrast Class</b>
<div class="grid grid-flow-col text-center p-4">
<img class="rounded-lg filter contrast-0"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter contrast-50"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter contrast-75"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter contrast-110"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter contrast-200"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
</div>
</body>
</html>
Đầu ra:
