Opacidade do pano de fundo no Tailwind CSS
Neste artigo, exploraremos o uso da classe Tailwind Backdrop Opacity com exemplos . Com o Tailwind, você pode usar a classe Backdrop Opacity em todos os navegadores da web.
Opacidade do pano de fundo do vento de cauda
A classe Tailwind Backdrop Opacity aplica um filtro à imagem e modifica sua transparência.
Em CSS normal, fazemos isso usando a função opacity(). Tailwind CSS adicionou esse recurso na versão 2.1.
Sintaxe
<element class="filter backdrop-opacity-{number}">..</element>
Valor de opacidade do pano de fundo
- background-opacity-number: Neste caso, o número pode ser substituído por uma variável de 0 a 100, com um intervalo de cinco como 5,10,15 até 100.
Nota: Nos exemplos, a classe background-hue-rotate foi aplicada para diferenciar entre os exemplos. Ao aplicar opacidade de fundo 100, o filtro de rotação de matiz de fundo é predefinido. Por outro lado, com pano de fundo-opacidade-0, o filtro panorâmico-hue-rotate torna-se transparente. Para os valores entre 0 a 100, a transparência do filtro Background-hue-rotate aumenta de 100 a 0.
Example:
Example:
