Backdrop Invert In Tailwind Css
In this article, we will explore the use of Tailwind Backdrop Invert class with examples. Tailwind lets developers use Backdrop Invert across all web browsers.
Tailwind Backdrop Invert
Tailwind backdrop invert class applies a filter to an image to invert its color.
A backdrop-invert class can be applied to any element with a background-color property.
Normal CSS uses the Backdrop Invert class, which is part of the Backdrop Filter module, which is a new module that is not supported by every browser yet and Tailwind CSS added this feature in version 2.1.
Syntax
<element class="filter backdrop-invert | backdrop-invert-0"> </element>
Tailwind Backdrop Invert Values
- backdrop-invert-0 : This class is used to represent the element in its original form without an invert filter. It’s equivalent to CSS backdrop-filter: invert(0).
- backdrop-invert : This class is used to represent the inverted color of an element’s original color. It’s equivalent to CSS backdrop-filter: invert(100%).
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 ">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Backdrop Invert Class in Tailwind CSS</p>
<div class=" mx-16 mt-18 h-36 relative">
<div class="absolute h-full w-full py-18">
<img class="rounded-lg object-cover h-full w-full" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image">
</div>
<div class="relative h-36 flex overflow-x-auto space-x-8 text-white font-bold">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-invert w-1/2 text-black">
backdrop-invert
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-invert-0 w-1/2">
backdrop-invert-0
</div>
</div>
</div>
</body>
</html>
Example Explain
In above example, there is a web page with a Tailwind Backdrop Invert class to invert the colors of the background.
- The HTML code defines a basic web page with a title and a body.
- The CSS class “text-center mx-4” is added to the body tag to center the text and add a margin on the left and right.
- The text “MrExamples” is added as a title using an h1 tag with the CSS classes “text-gray-600 text-2xl font-semibold“.
- A paragraph is added to the page with the text “Backdrop Invert Class in Tailwind CSS” using the CSS class “font-semibold my-2”.
An image is added to the page as a background to the div tag. - The CSS class “rounded-lg object-cover h-full w-full” is used to set the image’s style.
- A div is created below the image with the CSS class “relative h-36 flex overflow-x-auto space-x-8 text-white font-bold“. This div contains two child divs with the CSS classes “flex-shrink-0 border-2 border-gray-500 backdrop-filter backdrop-invert w-1/2 text-black” and “flex-shrink-0 border-2 border-gray-500 backdrop-filter backdrop-invert-0 w-1/2”.
- These child divs use the Backdrop Invert class to invert the colors of the background.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
