Opacidade do plano de fundo no Tailwind CSS

Neste artigo, forneceremos uma visão geral da classe Tailwind Background Opacity e como você pode usá-la para controlar a opacidade do plano de fundo de um elemento.

Quando se trata de criar designs da Web elegantes e modernos, a opacidade do plano de fundo é um elemento crucial. E no Tailwind CSS , isso é fácil de conseguir com a classe Background Opacity.

Opacidade de fundo do vento de cauda

Índice-

Opacidade de fundo do vento de cauda

Tailwind CSS fornece as classes utilitárias bg-opacity- [amount] que você pode usar para controlar a opacidade do plano de fundo de um elemento.

A classe Tailwind Background Opacity foi projetada para cobrir todas as propriedades em um formulário de classe e pode descrever a transparência de um elemento especificando sua opacidade de plano de fundo.

Sintaxe

Aqui está a sintaxe básica da classe Background Opacity no Tailwind CSS:

<element class="bg-{opacity}"></element>

Onde { opacity } é o valor de opacidade que você deseja aplicar ao plano de fundo do elemento.

Valor de opacidade do plano de fundo do Tailwind

  • background-opacity-0: Usando os utilitários bg-opacity-[amount], você pode controlar a opacidade do fundo de um elemento.
Observe que o valor de opacidade pode variar de 0 a 100 em incrementos de cinco etapas.

Vejamos um exemplo que demonstra o uso da classe Background Opacity em um fundo amarelo:

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
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Opacity Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 grid grid-rows-5
grid-flow-col text-center p-4 font-semibold">
<p class="p-2">
For Yellow Color
</p>
<p class="bg-yellow-500
bg-opacity-100 p-2">
bg-opacity-100
</p>
<p class="bg-yellow-500
bg-opacity-75 p-2">
bg-opacity-75
</p>
<p class="bg-yellow-500
bg-opacity-50 p-2">
bg-opacity-50
</p>
<p class="bg-yellow-500
bg-opacity-25 p-2">
bg-opacity-25
</p>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

No exemplo acima, definimos a cor de fundo de um elemento <p> como amarelo e usamos a classe Background Opacity para controlar a opacidade do plano de fundo.

Usamos diferentes valores da classe de utilidade bg-opacity-[amount] para criar um efeito gradiente , com a opacidade diminuindo gradualmente de 100 para 25.

Uma ilustração da classe bg-opacity aplicada a um fundo vermelho é apresentada no exemplo a seguir:

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
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Opacity Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 grid grid-rows-5
grid-flow-col text-center p-4 font-semibold">
<p class="p-2">
For Red Color
</p>
<p class="bg-red-600
bg-opacity-100 p-2">
bg-opacity-100
</p>
<p class="bg-red-600
bg-opacity-75 p-2">
bg-opacity-75
</p>
<p class="bg-red-600
bg-opacity-50 p-2">
bg-opacity-50
</p>
<p class="bg-red-600
bg-opacity-25 p-2">
bg-opacity-25
</p>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Abaixo você pode ver como o fundo azul é mesclado com a classe bg-opacity :

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
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Opacity Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 grid grid-rows-5
grid-flow-col text-center p-4 font-semibold">
<p class="p-2">
For Blue Color
</p>
<p class="bg-blue-500
bg-opacity-100 p-2">
bg-opacity-100
</p>
<p class="bg-blue-500
bg-opacity-75 p-2">
bg-opacity-75
</p>
<p class="bg-blue-500
bg-opacity-50 p-2">
bg-opacity-50
</p>
<p class="bg-blue-500
bg-opacity-25 p-2">
bg-opacity-25
</p>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo a seguir combina os exemplos acima:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Opacity Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 grid grid-rows-5
grid-flow-col text-center p-4 font-semibold">
<p class="p-2">
For Yellow
</p>
<p class="bg-yellow-500
bg-opacity-100 p-2">
bg-opacity-100
</p>
<p class="bg-yellow-500
bg-opacity-75 p-2">
bg-opacity-75
</p>
<p class="bg-yellow-500
bg-opacity-50 p-2">
bg-opacity-50
</p>
<p class="bg-yellow-500
bg-opacity-25 p-2">
bg-opacity-25
</p>
<p class="p-2">
For Red
</p>
<p class="bg-red-600
bg-opacity-100 p-2">
bg-opacity-100
</p>
<p class="bg-red-600
bg-opacity-75 p-2">
bg-opacity-75
</p>
<p class="bg-red-600
bg-opacity-50 p-2">
bg-opacity-50
</p>
<p class="bg-red-600
bg-opacity-25 p-2">
bg-opacity-25
</p>
<p class="p-2">
For Blue
</p>
<p class="bg-blue-500
bg-opacity-100 p-2">
bg-opacity-100
</p>
<p class="bg-blue-500
bg-opacity-75 p-2">
bg-opacity-75
</p>
<p class="bg-blue-500
bg-opacity-50 p-2">
bg-opacity-50
</p>
<p class="bg-blue-500
bg-opacity-25 p-2">
bg-opacity-25
</p>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A classe Background Opacity é um utilitário essencial no Tailwind CSS que você pode usar para controlar a opacidade do plano de fundo de um elemento.

Com este utilitário, você pode criar designs da Web impressionantes, elegantes e modernos.

Esperamos que este guia tenha sido útil para você e que você possa usar a classe Background Opacity em seus projetos futuros.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.