Busque efectos de fondo fijos con imágenes incrustadas trucos CSS

Hace unos días estaba trabajando en el proyecto de un cliente y quería <img>Verás, la imagen de fondo puede lograr fácilmente lo que quiero background-attachment: fixed;Con él, la imagen de fondo permanece en su lugar incluso cuando la página se desplaza. Rara vez se usa, por lo que el efecto puede parecer inusual y notable, especialmente cuando se usa con moderación.

contenido

Me tomó un tiempo descubrir cómo lograr el mismo efecto usando solo una imagen incrustada en lugar de una imagen de fondo CSS. Aquí hay un video de él en acción:

El código exacto para la demostración anterior es Disponible en este repositorio GitTenga en cuenta que este es un proyecto Next.js. Más adelante veremos un ejemplo de CodePen con HTML sin procesar.

Por que usar <img> reemplazar background-image?

Hay muchas razones por las que quiero esto en mi proyecto:

• La carga diferida es más fácil (p. <img loading="lazy"… >.
• Proporciona un mejor SEO (sin mencionar la accesibilidad) gracias a alt texto.
• puedo usar srcset/sizes para mejorar el rendimiento de la carga.
• puedo usar <picture> La sección selecciona el mejor tamaño y formato de imagen para el navegador del usuario.
• Permite a los usuarios descargar y guardar imágenes (sin recurrir a DevTools).

En general, es mejor usar etiquetas de imagen cuando sea posible, especialmente si la imagen se puede ver como contenido en lugar de como decoración. Entonces, finalmente encontré una técnica que usa CSS. clip-patha primera vista background-image method hace un buen trabajo al comparar los dos métodos entre sí.

1. Usa CSS background-image

Esta es la forma "original" de lograr un efecto de desplazamiento fijo. Aquí está CSS:

.hero-section {
  background-image: url("nice_bg_image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; 
  background-attachment: fixed;
}

Pero como acabamos de ver, este enfoque no es ideal en algunos casos porque se basa en CSS background-image Recuperación de imágenes y propiedades de carga. Esto significa que las imágenes no se consideran técnicamente contenido y, por lo tanto, los lectores de pantalla no las pueden reconocer. Si la imagen que usamos es parte del contenido, entonces realmente necesitamos hacerla accesible para que pueda ser consumida como contenido y no embellecida.

De lo contrario, esta técnica funciona bien, pero sólo Si la imagen cubre todo el ancho de la vista y/o está centradaSi tiene imágenes en el lado derecho o izquierdo de la página, por ejemplo, tendrá muchos problemas con el posicionamiento, porque. background-position Hacia el centro de la vista.

Repararlo requiere algunas solicitudes de medios para asegurarse de que esté colocado correctamente en todos los dispositivos.

2. Uso clip-path Consejos para imágenes incrustadas

alguien en StackOverflow compartir este clip-path Truco, hace un buen trabajo. Todavía puedes usar<img> Las etiquetas, como se mencionó anteriormente, pueden ser ventajosas en algunos casos, especialmente si la imagen es parte del contenido y no puramente decorativa.

Aquí está el truco:

.image-container {
  position: relative;
  height: 200px;
  clip-path: inset(0);
}

.image {
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

Míralo en acción:

Ahora, antes de apresurarnos y publicar este video en todas partes, tiene sus inconvenientes. un poco largo Un efecto tan simple para mí, pero lo más importante es con clip-path Hay algunos efectos Por un lado, no puedo simplemente abofetear border-radius: 10px; Redondea las esquinas de la imagen, como hice en el ejemplo anterior. Esto no funciona: debe hacer esquinas redondeadas desde el mismo camino de corte.

Otro ejemplo: no sé cómo posicionar la imagen dentro Esta clip-pathNuevamente, esto puede ser un problema conocido clip-path Muy bonito y píntalo donde sea necesario, o corta la imagen con anticipación si es necesario.

¿Hay algo mejor?

Personalmente, he renunciado a usar efectos de desplazamiento fijos para imágenes incrustadas y reutilizar imágenes de fondo CSS; sé que es una limitación.

¿Alguna vez ha intentado lograr esto, especialmente con imágenes incrustadas, y lo hizo bien? ¡Me encantaría oírlo!