Este post explica como escrever uma legenda sob uma imagem.
Como escrever uma legenda sob uma imagem?
Para escrever uma legenda sob uma imagem, forneceremos diferentes métodos mencionados abaixo:
- Método 1: Como adicionar legenda de imagem usando HTML “
' Elemento? - Método 2: Como adicionar legenda de imagem usando “ ' Elemento?
Método 1: Como adicionar legenda de imagem usando o elemento HTML “
”? Para adicionar uma legenda de imagem, siga as seguintes instruções:
- Primeiro, adicione o “
” elemento, que é utilizado para representar conteúdo independente, potencialmente com uma legenda opcional. - Em seguida, insira um “
” marca dentro do parágrafo “ ' marcação. Adicione a imagem utilizando o botão “ origem ” atributo. O ' tudo ” mostra o conteúdo adicionado se a imagem não for exibida por algum motivo.
- Defina a largura da imagem como “ 200px ”.
- Então o '
” é usada para adicionar a legenda da imagem. Além disso, adicione a legenda entre as tags “ ”:
= 'TSL.png' tudo = 'Criadores de conteúdo TSL' largura = '200' >
Você pode ver que a imagem com a legenda especificada foi exibida:
Agora, vá para o segundo método para adicionar a legenda usando CSS.
Método 2: Como adicionar legenda de imagem usando o elemento “
”?Para adicionar a legenda da imagem usando o botão “
” elemento, experimente as instruções dadas:
- Crie um ' ” e adicione um atributo de classe com o nome “ porta-imagem ”.
- Adicionar etiqueta de cabeçalho “ ” para inserir o cabeçalho e estilizá-lo de acordo com sua escolha.
- Adicione outro elemento “
” e insira um “” marca junto com “ origem ”, “ tudo ' e ' largura ” entre o contêiner div.
- Adicione um terceiro “
” com o nome da classe “ legenda da imagem ”. Em seguida, forneça a legenda entre as tags “”. Além disso, o “
” elemento é usado para adicionar uma quebra de linha:= 'portador de imagem' >
estilo
= 'TSL.png' tudo = 'Criadores de conteúdo TSL' largura = '200' >
= 'img-caption' >
>
>Pode-se observar que a legenda da imagem foi adicionada com sucesso:
Agora, vamos para a seção CSS para aplicar as propriedades.
Estilo “.image-holder” em CSS
Primeiro, acesse o “
” elemento tendo uma classe “ .image-holder ”. Em seguida, aplique as seguintes propriedades CSS: .image-holder {
posição : relativo ;
altura : 100px ;
largura : 200px ;
margem : auto ;
}Os detalhes das propriedades mencionadas acima são descritos 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 ” especifica o tamanho do elemento em largura.
- O ' margem ” é definido como “ auto ” para definir o espaço automaticamente ao redor do elemento.
Legenda de estilo em CSS
Nesta etapa, acessaremos as duas classes com o nome “ porta-imagem ' e ' legenda da imagem ” e aplique as seguintes propriedades CSS:
.image-holder .img-caption {
posição : absoluto ;
alinhamento de texto : Centro ;
espessura da fonte : negrito ;
largura : 200px ;
altura : 50px ;
deixei : 0px ;
cor : #f80909 ;
fundo : rgb ( 140 , 166 , 253 ) ;
}A descrição das propriedades acima mencionadas é a seguinte:
- O ' alinhamento de texto ” propriedade é definida como “ Centro ” para alinhar a posição do texto no centro.
- Próximo, ' espessura da fonte ” é alocado como “ negrito ” para definir a fonte da legenda da imagem.
- Então o ' cor ” é utilizada para definir a cor do elemento acessado.
- O ' fundo ” 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 “ ” recipiente. Para usar o “”, primeiro, adicione o “ ” elemento para incorporar a imagem dentro do “
” então, utilize o elemento “ ” e adicione uma legenda entre suas tags. Na segunda abordagem, os usuários podem simplesmente usar o botão “ ” e aplique diferentes propriedades CSS para embelezar a legenda. Este post demonstrou os métodos para escrever a legenda sob uma imagem.
- Primeiro, adicione o “