Como posicionar o texto sobre uma imagem?

Muitas vezes, os desenvolvedores da web desejam colocar algum texto sobre uma imagem para exibir algumas informações sobre essa imagem específica. Isso também pode desempenhar um papel importante em tornar seu site ou a imagem mais atraente, aumentando a chance de chamar a atenção do usuário. Agora existem várias posições em que você pode adicionar seu texto em uma imagem como segue.

1. Canto superior esquerdo
2. Canto inferior esquerdo
3. Centro
4. Canto superior direito
5. Canto inferior direito

Abaixo, demonstramos cada uma dessas posições.

Posicione o texto sobre uma imagem

Primeiro de tudo, adicionaremos uma imagem à nossa página da web usando HTML.

Html

Algum texto

No código acima, criamos um elemento div e aninhamos uma imagem e outro elemento div. A primeira div, como já mencionado, mantém a imagem e a outra div. Enquanto isso, o segundo contêiner Div mantém a posição e o estilo do texto que deve ser colocado na imagem.

Saída

Uma imagem foi inserida na página da web.

Canto superior esquerdo

A primeira posição do texto em que vamos definir é o canto superior esquerdo da imagem. Use o seguinte snippet de código.

CSS

.IMG-container
Posição: relativa;
Largura: 400px;

.imagem
Largura: 100%

.Topleft
Posição: Absoluto;
Size da fonte: 20px;
intensidade da fonte: Negrito;
estilo de fonte: itálico;
cor branca;
topo: 15px;
Esquerda: 30px;

A posição do primeiro elemento div foi definida como relativa para que possamos posicionar absolutamente o segundo elemento div. O texto a ser colocado na imagem recebeu algum tamanho, peso, estilo e cor, enquanto isso para posicioná -lo no canto superior esquerdo, usamos as propriedades superior e esquerda.

Saída

O texto foi colocado com sucesso no canto superior esquerdo.

Canto inferior esquerdo

Com o objetivo de adicionar um texto no canto inferior esquerdo da imagem, use o código mencionado abaixo.

CSS

.div
Posição: relativa;
Largura: 400px;

.imagem
Largura: 100%

.inferior esquerdo
Posição: Absoluto;
Size da fonte: 20px;
intensidade da fonte: Negrito;
estilo de fonte: itálico;
cor branca;
Inferior: 3%;
Esquerda: 8%;

O restante do código é o mesmo, no entanto, para posicionar o texto no canto inferior esquerdo, definimos a propriedade inferior para 3%e deixamos a propriedade para 8%. Você pode alterar os valores dessas propriedades para entender como elas funcionam.

Saída

O texto foi posicionado no canto inferior esquerdo com grande facilidade.

Centro

Da mesma forma, para colocar seu texto na posição central, considere o exemplo abaixo mencionado.

CSS

.div
Posição: relativa;
Largura: 400px;

.imagem
Largura: 100%

.Centro
Posição: Absoluto;
Size da fonte: 20px;
intensidade da fonte: Negrito;
estilo de fonte: itálico;
cor branca;
TOP: 40%;
Esquerda: 40%;

Com o objetivo de ajustar o texto na posição central da imagem, definimos a propriedade superior e deixamos a propriedade para 40%.

Saída

Colocamos com sucesso o texto no centro da imagem

Canto superior direito

Consulte o código abaixo para entender como colocar texto no canto superior direito da imagem.

CSS

.div
Posição: relativa;
Largura: 400px;

.imagem
Largura: 100%

.canto superior direito
Posição: Absoluto;
topo: 2%;
Direita: 10%;
Size da fonte: 20px;
intensidade da fonte: Negrito;
estilo de fonte: itálico;
cor branca;

O que simplesmente fizemos para colocar o texto no canto superior direito é que definimos a propriedade superior para 2%e a propriedade direita para 10%. Esta não é uma regra rígida e rápida, portanto, você pode alterar esses valores de acordo com o seu desejo.

Saída

O texto foi inserido no canto superior direito da imagem.

Canto inferior direito

Última posição que vamos demonstrar é o canto inferior direito da imagem. Siga o código abaixo.

CSS

.div
Posição: relativa;
Largura: 400px;

.imagem
Largura: 100%

.canto inferior direito
Posição: Absoluto;
Inferior: 5%;
Direita: 10%;
Size da fonte: 20px;
intensidade da fonte: Negrito;
estilo de fonte: itálico;
cor branca;

Como você pode ver, o restante do código é o mesmo que nos exemplos anteriores, com apenas diferença para colocar o texto no canto inferior direito, usamos a propriedade inferior e a propriedade direita.

Saída

O texto foi colocado no canto inferior direito.

Conclusão

Para posicionar seu texto em uma imagem, coloque sua imagem e texto dentro de um recipiente de div e posicionar absolutamente o texto, enquanto isso dando à div uma posição relativa. Posições diferentes que você pode colocar seu texto sobre uma imagem são o canto superior esquerdo, canto inferior esquerdo, centro, canto superior direito e canto inferior direito. Esta tarefa pode ser executada usando várias propriedades CSS. Neste post, demonstramos cada uma dessas posições junto com exemplos adequados.