`).
2. Estilo CSS :
- Estilize a imagem com dimensões apropriadas e quaisquer efeitos desejados.
- Estilize o texto da legenda usando o seletor `figcaption`.
3. Posicionamento da legenda :
- Use a propriedade `position` para posicionar a legenda em relação à imagem. As opções comuns incluem `absoluto`, `relativo` e `estático`.
- Ajuste as propriedades `top`, `right`, `bottom` e `left` para controlar a posição da legenda.
4. Aparência da legenda :
- Use as propriedades `background-color`, `color`, `padding` e `margin` para controlar o plano de fundo, a cor do texto, o espaçamento e o recuo da legenda.
5. Alinhamento de texto :
- Use a propriedade `text-align` para centralizar, alinhar à esquerda ou à direita o texto da legenda.
6. Efeitos de foco (opcional) :
- Adicione efeitos de foco à imagem ou legenda usando a pseudoclasse `:hover` para melhorar a interação do usuário.
7. Consultas de mídia (opcional) :
- Use consultas de mídia para ajustar o estilo da legenda para diferentes tamanhos de tela.
Aqui está um exemplo de trecho de código CSS:
```css
.image-container {
posição:relativa;
largura:300px;
}
.image-container img {
largura:100%;
}
.image-container figcaption {
posição:absoluta;
inferior:0;
esquerda:0;
largura:100%;
cor de fundo:rgba (0, 0, 0, 0,5);
cor:#fff;
preenchimento:10px;
alinhamento de texto:centro;
}
@media (largura máxima:600px) {
.image-container figcaption {
tamanho da fonte:0,8rem;
}
}
```
Neste exemplo, a legenda está posicionada absolutamente na parte inferior esquerda do contêiner da imagem, com fundo preto semitransparente e texto branco. Os estilos também são ajustados para telas menores usando uma consulta de mídia.
Experimente diferentes opções de estilo para criar efeitos de legenda de imagem exclusivos e visualmente atraentes.
