Clipe de plano de fundo do Tailwind: uma introdução
Neste artigo, exploraremos a classe Tailwind Background Clip e como ela pode ser usada para limitar a área onde uma cor ou imagem de fundo aparece.
Ao definir a propriedade do clipe de plano de fundo, você pode descartar e ocultar qualquer coisa fora da caixa, oferecendo uma interface de usuário visualmente mais agradável.
Clipe de plano de fundo do Tailwind
Usando a classe Tailwind Background Clip , você pode aplicar essa propriedade de maneira mais eficiente e conveniente.
Background Clip é uma alternativa à propriedade CSS background-clip, que limita a área onde a cor ou imagem de fundo aparece.
Sintaxe:
<element class="bg-clip-{Clip type}"></element>
Valores do clipe de plano de fundo do Tailwind
A classe Tailwind CSS Background Clip aceita vários valores, abrangendo todas as propriedades no formulário de classe.
Aqui estão as classes e seus valores de clipe correspondentes :
- bg-clip-border : Esta classe define a cor de fundo ou imagem para o conteúdo, preenchimento e borda.
- bg-clip-padding : Esta classe define a cor de fundo ou imagem para conteúdo e preenchimento. No entanto, não inclui a fronteira.
- bg-clip-content : Esta classe define a cor ou imagem de fundo apenas para o conteúdo, excluindo o preenchimento e a borda.
- bg-clip-text : Esta classe recorta o plano de fundo de um elemento para corresponder à forma do texto. É especialmente útil para criar efeitos nos quais você deseja que uma imagem de fundo apareça no texto.
Aqui está um exemplo de como usar a classe Background Clip do Tailwind CSS:
Example:
