Tidadigi Logo

Tailwind CSS Brightness

Class brightness được dùng để thiết lập độ sáng cho ảnh. Class này dùng hệ số nhân tuyến tính để tăng hoặc giảm độ sáng. Trong CSS, ta dùng CSS brightness() Function để làm điều đó. Tailwind CSS đã thêm tính năng brightness trong phiên bản 2.1.

Độ sáng (Brightness):

  • brightness-0: Class này dùng để thiết lập độ sáng tương đương CSS brightness(0).
  • brightness-50: Class này dùng để thiết lập độ sáng tương đương CSS brightness(0.5).
  • brightness-75: Class này dùng để thiết lập độ sáng tương đương CSS brightness(0.75).
  • brightness-90: Class này dùng để thiết lập độ sáng tương đương CSS brightness(0.9).
  • brightness-95: Class này dùng để thiết lập độ sáng tương đương CSS brightness(0.95).
  • brightness-100: Class này dùng để thiết lập độ sáng tương đương CSS brightness(1.0).
  • brightness-105: Class này dùng để thiết lập độ sáng tương đương CSS brightness(1.05).
  • brightness-110: Class này dùng để thiết lập độ sáng tương đương CSS brightness1.10).
  • brightness-125: Class này dùng để thiết lập độ sáng tương đương CSS brightness(1.25).
  • brightness-150: Class này dùng để thiết lập độ sáng tương đương CSS brightness(1.50).
  • brightness-200: Class này dùng để thiết lập độ sáng tương đương CSS brightness(2.0).

Cú pháp:

<element class="filter brightness-{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 brightness Class</b>
    <div class="grid grid-flow-col text-center p-4">
        <img class="rounded-lg filter brightness-0" 
          src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter brightness-50" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter brightness-75" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter brightness-110" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter brightness-200" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        
    </div>
</body>

</html>

Kết quả:

tailwind-css-brightness
Last Updated : 20/07/2025