Tidadigi Logo

Tailwind CSS Backdrop Grayscale

Lớp Backdrop Grayscale dùng để áp bộ lọc biến ảnh thành ảnh xám. Tailwind CSS mới thêm tính năng brightness trong phiên bản 2.1.

Backdrop Grayscale:

  • backdrop-grayscale-0: Lớp này thể hiện phần tử gốc ban đầu.
  • backdrop-grayscale: Lớp này thể hiện hệ số nhân tuyến tính lên hiệu ứng của các phần tử.

Cú pháp:

<element class="filter backdrop-grayscale | 
         backdrop-grayscale-0">
    /* ... */
</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 ">
  <h1 class="text-green-600 text-5xl font-bold">
      GeeksforGeeks
  </h1>

  <b>Tailwind CSS Backderop Grayscale Class</b>

  <div class=" mx-16 mt-18 h-36 relative">
    <div class="absolute w-full py-18">
      <img class="rounded-lg object-cover" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210605213323/Screenshot20210605213311.png" 
       alt="image">
    </div>

    <div class="relative h-32 flex overflow-x-auto space-x-4">
      <div class="flex-shrink-0 border-4 border-green-500 
           backdrop-filter backdrop-grayscale w-1/2">
      </div>

      <div class="flex-shrink-0 border-4 border-green-500 
           backdrop-filter backdrop-grayscale-0 w-1/2">
      </div>
    </div>
  </div>
</body>

</html>


Kết quả:

tailwind-css-backdrop-grayscale
Last Updated : 20/07/2025