Cómo escribir una leyenda bajo una imagen? - CSS

En HTML/CSS, los usuarios pueden agregar diferentes imágenes y logotipos mientras crean páginas web. Además, permite a los usuarios agregar una leyenda de la imagen e iniciar sesión en varios formularios. Por ejemplo, los usuarios pueden agregar el subtítulo debajo de la imagen, en la parte superior, su izquierda o derecha. Para este propósito, el "El elemento se utiliza.

Esta publicación explica sobre escribir un subtítulo bajo una imagen.

Cómo escribir una leyenda bajo una imagen?

Para escribir un subtítulo en una imagen, proporcionaremos diferentes métodos mencionados a continuación:

• Método 1: Cómo agregar un subtítulo de imagen usando HTML "" Elemento?
• Método 2: Cómo agregar una leyenda de imagen usando "" Elemento?

Método 1: Cómo agregar una leyenda de imagen usando el elemento HTML ""?

Para agregar un subtítulo de imagen, realice las siguientes instrucciones:

• Primero, agregue el "El elemento, que se utiliza para representar el contenido autónomo, potencialmente con una leyenda opcional.
• A continuación, inserte un ""Etiqueta dentro del párrafo"

  " etiqueta. Agregue la imagen utilizando el "SRC" atributo. El "alternativo"La propiedad muestra el contenido agregado si la imagen no se mostró debido a alguna razón.

• Establezca el ancho de la imagen como "200px".
• Entonces el ""La etiqueta se usa para agregar el subtítulo de la imagen. Además, agregue el subtítulo entre las etiquetas "":

>

Puede ver que se ha mostrado la imagen con el título especificado:

Ahora, avance hacia el segundo método para agregar la leyenda usando CSS.

Método 2: Cómo agregar un subtítulo de imagen usando el elemento ""?

Para agregar el título de imagen usando el ""Elemento, pruebe las instrucciones dadas:

• Crear un ""Contenedor y agregue un atributo de clase con el nombre"titular de la imagen".
• Agregar etiqueta de encabezado "

  "Para insertar el encabezado y el estilo del encabezado de acuerdo con su elección.

• Agregue otro elemento "" e inserte un ""Etiqueta junto con"SRC","alternativo" y "ancho"Atributos entre el contenedor Div.
• Agregue un tercero "" con el nombre de la clase "IMG-Caption". Luego, proporcione el subtítulo entre las etiquetas "". Además, el "
  El elemento se usa para agregar un descanso de línea:

Imagen HTML

Creadores de contenido de TSL

Se puede observar que el subtítulo de la imagen se ha agregado con éxito:

Ahora, avancemos hacia la sección CSS para aplicar las propiedades.

Estilo ".poseedor de imágenes "en CSS

Primero, acceda al ""Elemento tiene una clase".titular de la imagen". Luego, aplique las siguientes propiedades CSS:

.titular de la imagen
Posición: relativo;
Altura: 100px;
Ancho: 200px;
margen: auto;

Los detalles de las propiedades de mención anteriores se describen a continuación:

• El "posición"Está configurado como"relativo"Para especificar la posición original de un elemento que permanece en el flujo del documento, al igual que el valor estático.
• Entonces, "altura"Se usa para definir la altura del elemento.
• El "ancho"La propiedad especifica el tamaño del elemento en ancho.
• El "margen"Está configurado como"auto"Para establecer el espacio automáticamente alrededor del elemento.

Leyenda de estilo en CSS

En este paso, accederemos a las dos clases con el nombre "titular de la imagen" y "IMG-Caption”Y aplique las siguientes propiedades de CSS:

.titular de la imagen .IMG-Caption
Posición: Absoluto;
Text-Align: Center;
Font-Weight: Bold;
Ancho: 200px;
Altura: 50px;
Izquierda: 0px;
Color: #F80909;
Antecedentes: RGB (140, 166, 253);

La descripción de las propiedades mencionadas anteriormente es la siguiente:

• El "texto alineado"La propiedad se establece como"centro"Para alinear la posición de texto en el centro.
• Próximo, "pescado"Se asigna como"atrevido"Para configurar la fuente de subtítulos de imagen.
• Entonces el "colorSe utiliza la propiedad para establecer el color del elemento accedido.
• El "fondoLa propiedad establece el color del fondo del elemento.
• Otras propiedades, incluyendo "posición","altura", y "ancho"También se utilizan para aplicar las funcionalidades respectivas.

Producción

Hemos discutido los métodos para escribir el subtítulo bajo una imagen.

Conclusión

Para escribir un subtítulo en una imagen, los usuarios pueden usar el ""Elemento o un simple"" envase. Para usar el "", primero, agregue el ""Elemento para incrustar la imagen dentro del"El elemento ", entonces, utilice el elemento" "y agregue una leyenda entre sus etiquetas. En el segundo enfoque, los usuarios simplemente pueden usar el ""Elemento y aplique diferentes propiedades de CSS para embellecer el título. Esta publicación ha demostrado los métodos para escribir el subtítulo bajo una imagen.