Às vezes, as imagens em uma página da Web podem ter texto adicionado a elas. As legendas podem ser feitas de como posicionar o texto sobre uma imagem. Você não pode colocar texto em cima de uma imagem apenas com elementos HTML. Precisamos usar propriedades CSS para isso.
Os desenvolvedores da Web criam sites com boa aparência para que os usuários fiquem mais interessados e felizes. A colocação de texto sobre uma imagem é uma maneira de os desenvolvedores adicionarem um elemento visual a um site. Tendo em mente a capacidade de resposta, é importante garantir que o texto permaneça o mesmo, mesmo que a imagem seja redimensionada porque é responsiva.
Como posicionar o texto sobre uma imagem
Ao criar uma foto galeria ou algo parecido, você pode precisar colocar algum texto de legenda ou descrição sobre a imagem. Você pode usar os métodos de posicionamento CSS em combinação com a propriedade margin para posicionar ou colocar o texto sobre uma imagem (ou seja, o elemento).
Canto superior esquerdo
A primeira posição do texto onde vamos definir é o canto superior esquerdo da imagem. Use o seguinte trecho de código.
CSS: Definimos a posição do primeiro elemento div como “relative” para que possamos definir a posição do segundo elemento div como “absolute.” O texto que ficará na imagem recebeu tamanho, peso, estilo e cor. As propriedades top e left foram usadas para colocar o texto 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: O restante do código é o mesmo, porém, para posicionar o texto no canto inferior esquerdo, definimos a propriedade inferior como 3 %, e deixou a propriedade para 8%. Você pode alterar os valores dessas propriedades para entender como elas funcionam.
Centro
Da mesma forma, para colocar seu texto na posição central, considere o exemplo abaixo mencionado. Com o objetivo de ajustar o texto na posição central da imagem, definimos a propriedade superior e a propriedade esquerda em 40%.
Canto superior direito
O que simplesmente fizemos para coloque 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 seu desejo.
Canto inferior direito
Como você pode ver, o restante do código é o igual aos exemplos anteriores com a única diferença que para colocar o texto no canto inferior direito usamos a propriedade bottom e a propriedade right.
FAQ
Como altero a posição de texto em uma imagem?
Com a propriedade CSS position, você pode definir onde o texto vai sobre uma imagem. Você pode fazer isso colocando a imagem e o texto em um “div” em HTML. Em seguida, torne a posição do div “relativa” e a posição do texto “absoluta”. Os elementos absolutos são colocados com base em onde seu elemento pai está (div).
Como posiciono o texto sobre uma imagem responsiva?
Você pode colocar texto em uma imagem usando o Propriedade de posição CSS. Para fazer isso, adicione position:absolute ao texto e position:relative à imagem. Coloque ambos dentro de um elemento div>. Também podemos usar as propriedades top, bottom, left e right para colocar o texto em um determinado lugar na imagem.
Como eu especifico a posição do texto em CSS?
h1 { text-align: Centro; } h2 { alinhamento de texto: esquerda; } h3 { alinhamento de texto: direita; … Alinhe a última linha do texto em três elementos
: p.a { text-align-last: right; } p.b { text-align-last: center; } p.c { … Define o alinhamento vertical de uma imagem em um texto: img.a { vertical-align: baseline; } img.b { vertical-align: text-top; }