Posição de segundo plano do vento de cauda: uma breve visão geral

Este artigo fornece uma breve visão geral da classe Tailwind Background Position com exemplos , uma alternativa à propriedade CSS background-position.

Com esta classe, você pode posicionar uma imagem de fundo para um elemento.

O posicionamento padrão de uma imagem de plano de fundo em um elemento é no canto superior esquerdo.

Posições de fundo do vento de cauda

Sintaxe

Para usar a classe Tailwind Background Position, use a seguinte sintaxe:

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

Índice-

Classes de posição de segundo plano do Tailwind

Tailwind CSS fornece um conjunto de classes para posicionar uma imagem de plano de fundo em um elemento.

Essas classes aceitam mais de um valor, permitindo que você posicione a imagem de fundo em qualquer lugar que desejar.

Aqui estão as classes de posição de segundo plano Tailwind disponíveis:

  1. bg-left-top : Esta classe posiciona o plano de fundo no canto superior esquerdo.
  2. bg-top : O plano de fundo é posicionado no topo da página com esta classe.
  3. bg-right-top : Com esta classe, o plano de fundo aparece no canto superior direito da página.
  4. bg-left : O plano de fundo é posicionado à esquerda da página com esta classe.
  5. bg-center : Esta classe posiciona o fundo no centro da página.
  6. bg-right : Com esta classe, o fundo aparece à direita.
  7. bg-left-bottom : Esta classe posiciona o plano de fundo na parte inferior esquerda da página.
  8. bg-bottom : Com esta classe, o plano de fundo aparece na parte inferior da página.
  9. bg-right-bottom : O plano de fundo é posicionado na parte inferior direita da página com esta classe.

O exemplo a seguir demonstra o uso da classe bg-left-top :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-left-top class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-left-top" class="bg-no-repeat bg-left-top bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uma boa demonstração da classe bg-top é apresentada no exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-top class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-top" class="bg-no-repeat bg-top bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo a seguir mostra a implementação da classe bg-right-top :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-right-top class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-right-top" class="bg-no-repeat bg-right-top bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo a seguir exibe o uso da classe bg-left :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-left class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-left" class="bg-no-repeat bg-left bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo a seguir demonstra brevemente a aplicação de bg-center :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-center class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-center" class="bg-no-repeat bg-center bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um exemplo simples de como a classe bg-right pode ser usada é mostrado 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
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-right class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-right" class="bg-no-repeat bg-right bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo a seguir apresenta o uso prático da classe bg-left-bottom :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-left-bottom class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-left-bottom" class="bg-no-repeat bg-left-bottom bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo abaixo facilita a visualização da aplicação da classe bg-bottom :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-bottom class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-bottom" class="bg-no-repeat bg-bottom bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo que descreve a exploração da classe bg-right-bottom :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Tailwind CSS bg-right-bottom class</p>
<div class="bg-gray-300 mx-16 flex justify-center items-center p-2">
<div title="bg-right-bottom" class="bg-no-repeat bg-right-bottom bg-transparent w-28 h-28 border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Agora vamos dar uma olhada usando um exemplo que combina todas as classes usadas 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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Position Class in Tailwind CSS</p>
<div class="bg-gray-300
mx-16
space-y-4
p-2
justify-between
grid grid-rows-3
grid-flow-col">
<div title="bg-left-top" class="bg-no-repeat bg-left-top
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-left" class="bg-no-repeat bg-left
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-left-bottom" class="bg-no-repeat bg-left-bottom
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-top" class="bg-no-repeat bg-top
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-center" class="bg-no-repeat bg-center
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-bottom" class="bg-no-repeat bg-bottom
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-right-top" class="bg-no-repeat bg-right-top
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-right" class="bg-no-repeat bg-right
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
<div title="bg-right-bottom" class="bg-no-repeat bg-right-bottom
bg-transparent w-28 h-28
border-4 my-4" style="background-image:url(
https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg);background-size:50%">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

O exemplo acima mostra uma grade de nove quadrados com diferentes posições de fundo.

A classe “text-center” é aplicada ao elemento body, que centraliza o texto dentro dele. O elemento <h1> exibe o texto “MrExamples” na cor cinza, tamanho 2xl e espessura da fonte em negrito.

O elemento <p> abaixo dele exibe o texto “Classe de posição de plano de fundo no Tailwind CSS” com peso de fonte em negrito e margem superior de 2 unidades.

O <div> com a classe “ bg-gray-300 mx-16 space-y-4 p-2 justifique-entre a grade grid-rows-3 grid-flow-col ” cria um contêiner de grade com 3 linhas e 3 colunas, com um plano de fundo cinza, margin-x de 16 unidades, preenchimento de 2 unidades e espaços entre elementos filho de 4 unidades. Cada elemento filho é um div quadrado com largura e altura de 28 unidades, fundo transparente e borda de 4 unidades.

Os divs filhos também têm classes diferentes que determinam a posição de fundo da imagem, especificada por “ bg-left-top ”, “ bg-left ”, “bg-left-bottom”, “bg-top”, “bg- center”, “bg-bottom”, “bg-right-top”, “bg-right” e “bg-right-bottom”.

As imagens usadas como fundo para cada quadrado têm um tamanho de 50% do elemento.

Ao passar o mouse sobre cada quadrado, você pode ver o título do quadrado que corresponde à classe de posição de fundo aplicada a ele.

Este exemplo demonstra o uso de classes de posição de plano de fundo do Tailwind para especificar a posição de uma imagem de plano de fundo dentro de um elemento.

Esperamos que este artigo forneça uma visão geral útil da classe Tailwind Background Position.

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.