Como escrever uma legenda sob uma imagem? - CSS

No HTML/CSS, os usuários podem adicionar imagens e logotipos diferentes enquanto criava páginas da web. Além disso, permite aos usuários adicionar uma legenda da imagem e fazer login em várias formas. Por exemplo, os usuários podem adicionar a legenda sob a imagem, na parte superior, sua esquerda ou direita. Para esse fim, o “”O elemento é utilizado.

Este post explica sobre escrever uma legenda sob uma imagem.

Como escrever uma legenda sob uma imagem?

Para escrever uma legenda sob uma imagem, forneceremos métodos diferentes mencionados abaixo:

• Método 1: Como adicionar a legenda da imagem usando HTML “" Elemento?
• Método 2: Como adicionar a legenda da imagem usando “" Elemento?

Método 1: Como adicionar a legenda da imagem usando o elemento HTML “”?

Para adicionar uma legenda de imagem, analise as seguintes instruções:

• Primeiro, adicione o “”Elemento, que é utilizado para representar conteúdo independente, potencialmente com uma legenda opcional.
• Em seguida, insira um “”Tag dentro do parágrafo“

  " marcação. Adicione a imagem utilizando o “src”Atributo. O "alt”Propriedade mostra o conteúdo adicionado se a imagem não exibiu por algum motivo.

• Defina a largura da imagem como “200px”.
• Então o "”A tag é usada para adicionar a legenda para a imagem. Além disso, adicione a legenda entre as tags "":

>

Você pode ver que a imagem com a legenda especificada foi exibida:

Agora, mova -se em direção ao segundo método para adicionar a legenda usando CSS.

Método 2: Como adicionar a legenda da imagem usando o elemento “”?

Para adicionar a legenda da imagem usando o “”Elemento, experimente as instruções fornecidas:

• Criar uma "”Contêiner e adicione um atributo de classe com o nome“Holder de imagem”.
• Adicionar tag de cabeçote “

  ”Para inserir o cabeçalho e estilizar o cabeçalho de acordo com sua escolha.

• Adicione outro elemento “” e insira um “”Tag junto com“src","alt" e "largura”Atributos entre o contêiner Div.
• Adicione um terceiro "" com o nome da classe "Caption IMG”. Em seguida, forneça a legenda entre as tags "". Além disso, o “
  ”O elemento é usado para adicionar uma quebra de linha:

Imagem html

Criadores de conteúdo TSL

Pode -se observar que a legenda para a imagem foi adicionada com sucesso:

Agora, vamos para a seção CSS para aplicar as propriedades.

Estilo ".Holder de imagem ”em CSS

Primeiro, acesse o “”Elemento com uma classe“.Holder de imagem”. Em seguida, aplique as seguintes propriedades CSS:

.Holder de imagem
Posição: relativa;
Altura: 100px;
Largura: 200px;
margem: automático;

Os detalhes das propriedades acima mencionadas são descritas abaixo:

• O "posição"É definido como"relativo”Para especificar a posição original de um elemento que permanece no fluxo do documento, assim como o valor estático.
• Então, "altura”É usado para definir a altura do elemento.
• O "largura”Propriedade especifica o tamanho do elemento em largura.
• O "margem"É definido como"auto”Para definir o espaço automaticamente em torno do elemento.

Legenda de estilo em CSS

Nesta etapa, acessaremos as duas classes com o nome “Holder de imagem" e "Caption IMG”E aplique as seguintes propriedades CSS:

.Holder de imagem .IMG-Caption
Posição: Absoluto;
Alinhamento de texto: centro;
intensidade da fonte: Negrito;
Largura: 200px;
Altura: 50px;
Esquerda: 0px;
Cor: #F80909;
Antecedentes: RGB (140, 166, 253);

A descrição das propriedades acima mencionadas são as seguintes:

• O "alinhamento de texto”A propriedade é definida como“Centro”Para alinhar a posição de texto no centro.
• Próximo, "espessura da fonte"É alocado como"audacioso”Para definir a fonte da legenda da imagem.
• Então o "cor”A propriedade é utilizada para definir a cor do elemento acessado.
• O "fundo”Propriedade define a cor do fundo do elemento.
• Outras propriedades, incluindo “posição","altura", e "largura”Também são usados ​​para aplicar as respectivas funcionalidades.

Saída

Discutimos os métodos para escrever a legenda sob uma imagem.

Conclusão

Para escrever uma legenda sob uma imagem, os usuários podem usar o “”Elemento ou um simples“”Contêiner. Para usar o "", primeiro, adicione o "”Elemento para incorporar a imagem dentro do“”O elemento, então, utilize o elemento“ ”e adicione uma legenda entre suas tags. Na segunda abordagem, os usuários podem simplesmente usar o “”Elemento e aplique propriedades CSS diferentes para embelezar a legenda. Este post demonstrou os métodos para escrever a legenda sob uma imagem.