Contraste de pano de fundo no Tailwind CSS
Neste artigo, discutiremos e demonstraremos os casos de uso da classe Tailwind Backdrop Contrast .
O recurso de contraste foi introduzido no Tailwind CSS versão 2.1.
O Tailwind permite que os desenvolvedores usem a classe Backdrop Contrast em todos os navegadores da web.
No CSS normal, a classe Backdrop Contrast faz parte do módulo Backdrop Filter, que é um novo módulo que ainda não é suportado por todos os navegadores.
Índice-
Contraste do pano de fundo do vento de cauda
Uma das muitas classes úteis disponíveis no Tailwind é a classe Backdrop Contrast .
Usando a classe de contraste do pano de fundo, você pode ajustar o contraste da imagem.
Pode ser usado para aumentar ou diminuir o contraste.
Sintaxe
<element class="filter backdrop-contrast-{amount}">..</element>
Valores de contraste do pano de fundo do Tailwind
- background-contrast-0 – O contraste em um elemento é definido como 0% do contraste padrão usando esta classe. Equivalente ao CSS contrast(0).
- background-contrast-50 – O contraste em um elemento é definido como 50% do contraste padrão usando esta classe. Equivalente ao contraste CSS (0,5).
- background-contrast-75 – O contraste em um elemento é definido como 75% do contraste padrão usando esta classe. Equivalente ao contraste CSS (0,75).
- background-contrast-100 – O contraste em um elemento é definido como padrão usando esta classe. Equivalente ao CSS contrast(1.0).
- background-contrast-125 – O contraste em um elemento é definido como 125% do contraste padrão usando esta classe. Equivalente a CSS contrast(1.25).
- background-contrast-150 – O contraste em um elemento é definido como 150% do contraste padrão usando esta classe. Equivalente ao CSS contrast(1.50).
- background-contrast-200 – O contraste em um elemento é definido como 200% do contraste padrão usando esta classe. Equivalente ao CSS contrast(2.0).
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 "
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Backdrop Contrast Class in Tailwind CSS
class=" mx-16 mt-18 h-36 relative"
class="absolute w-full py-18"
class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image"
class="relative h-36 flex overflow-x-auto space-x-2 text-white"
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-0 w-1/4"
backdrop-contrast-0
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-75 w-1/4"
backdrop-contrast-75
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-100 w-1/4"
backdrop-contrast-125
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-200 w-1/4"
backdrop-contrast-200
Exemplo de Explicação
No exemplo acima, temos uma página que mostra diferentes classes de contraste de pano de fundo do Tailwind .
Aqui está um detalhamento do exemplo acima:
- A seção head inclui um link para a biblioteca Tailwind CSS.
- A seção do corpo contém um cabeçalho, um parágrafo e uma imagem centralizada na página. Também inclui um elemento div que tem uma classe de mx-16 mt-18 h-36 relativa. Este elemento div contém dois elementos filho: um div posicionado absoluto com uma classe w-full py-18 e um div posicionado relativo que possui uma classe h-36 flex overflow-x-auto space-x-2 text-white .
- A tag img contém uma fonte de imagem e tem uma classe de cobertura de objeto lg arredondada .
- O segundo div contém quatro elementos div filhos, cada um com uma classe de filtro de pano de fundo flex-shrink-0 border-2 border-gray-500 .
- As diferentes classes de contraste do pano de fundo são aplicadas a cada um desses elementos div para mostrar como eles afetam o contraste do pano de fundo atrás do elemento.
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 "
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Backdrop Contrast Class in Tailwind CSS
class=" mx-16 mt-18 h-36 relative"
class="absolute w-full py-18"
class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image"
class="relative h-32 flex overflow-x-auto space-x-2 text-white"
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-50 w-1/4"
backdrop-contrast-50
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-100 w-1/4"
backdrop-contrast-100
class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-150 w-1/4"
backdrop-contrast-150
Os exemplos acima mostram como usar a propriedade de contraste do pano de fundo do Tailwind para manipular o contraste do pano de fundo atrás de um elemento.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
