Superposición de texto en imágenes: Mejora la legibilidad con filtros de fondo CSS

Introducción

En este laboratorio, aprenderemos sobre la superposición de texto en imágenes utilizando CSS. El objetivo de este laboratorio es enseñarte a mostrar texto sobre una imagen con una superposición, de modo que sea legible independientemente de la imagen de fondo y el color. Aprenderás a utilizar la propiedad backdrop-filter para aplicar un efecto de desenfoque y brillo a tu texto, creando un diseño profesional y visualmente atractivo.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/positioning("Positioning") subgraph Lab Skills css/selectors -.-> lab-35247{{"Superposición de texto en imágenes"}} css/fonts -.-> lab-35247{{"Superposición de texto en imágenes"}} css/text_styling -.-> lab-35247{{"Superposición de texto en imágenes"}} css/margin_and_padding -.-> lab-35247{{"Superposición de texto en imágenes"}} css/positioning -.-> lab-35247{{"Superposición de texto en imágenes"}} end

Superposición de texto en imágenes

index.html y style.css ya se han proporcionado en la máquina virtual.

Para mostrar texto sobre una imagen con una superposición, utiliza la propiedad backdrop-filter para aplicar un efecto de desenfoque(14px) y brillo(80%). Esto garantiza que el texto sea legible independientemente de la imagen de fondo y el color. Aquí hay un ejemplo de código HTML:

<div>
  <h3 class="text-overlay">Hello, World</h3>
  <img src="https://picsum.photos/id/1050/1200/800" />
</div>

Y el código CSS correspondiente:

div {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  backdrop-filter: blur(14px) brightness(80%);
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Superposición de texto en imágenes. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.