Esta publicación explica cómo escribir un pie de foto debajo de una imagen.
¿Cómo escribir un título debajo de una imagen?
Para escribir un título debajo de una imagen, proporcionaremos diferentes métodos que se mencionan a continuación:
- Método 1: Cómo agregar una leyenda 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 una leyenda de imagen, sigue las siguientes instrucciones:
- Primero, agregue el '
”, que se utiliza para representar contenido autónomo, potencialmente con un título opcional. - A continuación, inserte un “
” etiqueta dentro del párrafo “ ' etiqueta. Agregue la imagen utilizando el botón “ origen ' atributo. Él ' todo La propiedad ” muestra el contenido agregado si la imagen no se muestra por algún motivo.
- Establezca el ancho de la imagen como “ 200px ”.
- Entonces la '
La etiqueta ” se usa para agregar el título de la imagen. Además, agregue el título entre las etiquetas ' ':
= 'TSL.png' todo = 'Creadores de contenido TSL' ancho = '200' >
Puede ver que se ha mostrado la imagen con el título especificado:
Ahora, avance hacia el segundo método para agregar el título usando CSS.
Método 2: ¿Cómo agregar una leyenda de imagen usando el elemento '
'?Para agregar la leyenda de la imagen usando el botón “
”, 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 diseñar el encabezado según su elección.
- Agregue otro elemento '
' e inserte un '” etiqueta junto con “ origen ”, “ todo ' y ' ancho ” atributos entre el contenedor div.
- Agregue un tercer '
' con el nombre de clase ' img-título ”. Luego, proporcione el título entre las etiquetas ''. Además, el “
El elemento ” se usa para agregar un salto de línea:= 'titular de la imagen' >
estilo
= 'TSL.png' todo = 'Creadores de contenido TSL' ancho = '200' >
= 'img-título' >
> Creadores de contenido TSL
>
>Se puede observar que el título de la imagen se ha agregado con éxito:
Ahora, avancemos hacia la sección CSS para aplicar las propiedades.
Estilo “.image-holder” en CSS
Primero, acceda al “
'elemento que tiene una clase' titular de la imagen ”. Luego, aplica las siguientes propiedades CSS: titular de la imagen {
posición : pariente ;
altura : 100 píxeles ;
ancho : 200px ;
margen : auto ;
}Los detalles de las propiedades antes mencionadas se describen a continuación:
- Él ' posición ” se establece como “ pariente ” para especificar la posición original de un elemento que permanece en el flujo del documento, al igual que el valor estático.
- Después, ' altura ” se utiliza para definir la altura del elemento.
- Él ' ancho La propiedad ” especifica el tamaño del elemento en ancho.
- Él ' margen ” se establece como “ auto ” para configurar 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-título ” y aplicar las siguientes propiedades CSS:
titular de la imagen .img-título {
posición : absoluto ;
texto alineado : centro ;
peso de fuente : atrevido ;
ancho : 200px ;
altura : 50px ;
izquierda : 0px ;
color : #f80909 ;
antecedentes : RGB ( 140 , 166 , 253 ) ;
}La descripción de las propiedades antes mencionadas es la siguiente:
- Él ' texto alineado La propiedad ” se establece como “ centro ” para alinear la posición del texto en el centro.
- Próximo, ' peso de fuente ” se asigna como “ atrevido ” para configurar la fuente de la leyenda de la imagen.
- Entonces la ' color La propiedad ” se utiliza para establecer el color del elemento al que se accede.
- Él ' antecedentes La propiedad ” establece el color del fondo del elemento.
- Otras propiedades, incluyendo “ posición ”, “ altura ', y ' ancho ” también se utilizan para aplicar las respectivas funcionalidades.
Producción
Hemos discutido los métodos para escribir el pie de foto debajo de una imagen.
Conclusión
Para escribir un pie de foto debajo de una imagen, los usuarios pueden usar el botón '
” elemento o un simple “ ' envase. Para usar el “”, primero, agregue el “ ” elemento para incrustar la imagen dentro del “
”, luego, utilice el elemento “ ” y agregue un título entre sus etiquetas. En el segundo enfoque, los usuarios pueden simplemente usar el ' ” y aplique diferentes propiedades CSS para embellecer el pie de foto. Esta publicación ha demostrado los métodos para escribir el pie de foto debajo de una imagen.
- Primero, agregue el '