Inversão de pano de fundo no Tailwind Css
Neste artigo, exploraremos o uso da classe Tailwind Backdrop Invert com exemplos . O Tailwind permite que os desenvolvedores usem o Backdrop Invert em todos os navegadores da web.
Inversão de pano de fundo com vento de cauda
A classe de inversão de pano de fundo Tailwind aplica um filtro a uma imagem para inverter sua cor.
Uma classe de inversão de fundo pode ser aplicada a qualquer elemento com uma propriedade de cor de fundo.
O CSS normal usa a classe Backdrop Invert, que faz parte do módulo Backdrop Filter, que é um novo módulo que ainda não é suportado por todos os navegadores e o Tailwind CSS adicionou esse recurso na versão 2.1.
Sintaxe
<element class="filter backdrop-invert | backdrop-invert-0"> </element>
Valores de inversão de pano de fundo do Tailwind
- background-invert-0 : Esta classe é usada para representar o elemento em sua forma original sem um filtro de inversão. É equivalente ao filtro de pano de fundo do CSS: invert(0) .
- background-invert : Esta classe é usada para representar a cor invertida da cor original de um elemento. É equivalente ao filtro de pano de fundo do CSS: inverter(100%).
Example:
Exemplo Explique
No exemplo acima, há uma página da Web com uma classe Tailwind Backdrop Invert para inverter as cores do plano de fundo.
- O código HTML define uma página da Web básica com um título e um corpo.
- A classe CSS “ text-center mx-4 ” é adicionada à tag body para centralizar o texto e adicionar uma margem à esquerda e à direita .
- O texto “ MrExamples ” é adicionado como um título usando uma tag h1 com as classes CSS “ text-gray-600 text-2xl font-semibold “.
- Um parágrafo é adicionado à página com o texto “Backdrop Invert Class in Tailwind CSS” usando a classe CSS “font-semibold my-2”.
Uma imagem é adicionada à página como plano de fundo da tag div . - A classe CSS “ rounded-lg object-cover h-full w-full ” é usada para definir o estilo da imagem.
- Um div é criado abaixo da imagem com a classe CSS “ relative h-36 flex overflow-x-auto space-x-8 text-white font-bold ”. Este div contém dois divs filhos com as classes CSS “flex-shrink-0 border-2 border-gray-500 pano de fundo-filtro pano de fundo-inverter w-1/2 text-black” e “flex-shrink-0 border-2 border -gray-500 pano de fundo-filtro pano de fundo-inverter-0 w-1/2”.
- Esses divs filhos usam a classe Backdrop Invert para inverter as cores do plano de fundo.
