Tidadigi Logo

Tailwind CSS Backdrop Invert

Lớp backdrop invert là một hàm tích hợp sẵn. Nó được dùng để áp dụng bộ lọc đảo ngược màu cho ảnh mẫu. Tailwind CSS đã thêm thuộc tính brightness mới trong phiên bản 2.1.

Backdrop Invert:

  • backdrop-invert-0: Lớp này dùng để hiển thị màu gốc trên một phần tử.
  • backdrop-invert: Lớp này dùng để hiển thị màu đảo ngược của màu gốc trên phần tử.

Syntax:

<element class="filter backdrop-invert | 
    backdrop-invert-0">
</element>

Example:

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 Backdrop Invert Rotate 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-invert-0 w-1/2">
      </div>

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

</html>


Output:

tailwind-css-backdrop-invert


Last Updated : 20/07/2025