¿Es posible usar una presentación de diapositivas receptiva que use imágenes de fondo con 3 puntos de interrupción usando javascript?

Podría hacerlo sin depender de JavaScript (al menos para las travesuras receptivas)

Implica utilizar el elemento como si fuera una imagen de fondo. Así es como se vería:

1. Establezca la diapositiva en position:relative
2. Pon una dentro de tu diapositiva
3. Establezca la picture en position:absolute; top:0; left:0; z-index:-1 position:absolute; top:0; left:0; z-index:-1
4. Agregue sus elementos ; uno para cada punto de interrupción.

use Picturefill.js si es necesario.

• ¿Cómo registrar su sitio web en la web? ¿Tiene que comprar un nombre de dominio o simplemente puede usar lo que sea
• ¿Qué proyecto puedo hacer como desarrollador web front-end que agregaría peso a mi currículum?
• ¿Dónde puedo aprender a hacer bellas artes en 2D para mi juego?
• ¿Vale la pena hacer un entrenamiento de verano en desarrollo web?
• Sistema de nombres de dominio (DNS): ¿Cuáles son las diferencias entre https://www.example.com y https://example.com?

¿Como funciona esto?

• Posición: relativo crea un “contexto de apilamiento” para su elemento de diapositiva. En realidad no necesitará una propiedad superior o izquierda.
• Al establecer en position:absolute , su fuera del flujo de contenido. Debido a que el elemento padre es position:relative , su está fuera del flujo, pero no de la diapositiva.
• Las propiedades top:0 e left:0 de su imagen garantizan que comience en la esquina superior izquierda. z-index: -1 se asegura de que se encuentre detrás del contenido.

¿Por qué hacerlo de esta manera?

Semántica: desde la perspectiva de la semántica HTML, puede que no sea ​​la mejor. Después de todo, estás tratando una imagen de fondo como contenido.

CMS : Sin embargo, cuando trabaja con un sistema de administración de contenido, este enfoque funciona muy bien. Esto se debe a que las imágenes receptivas gestionadas por contenido son difíciles, y doblemente cuando son imágenes de fondo. Su alternativa es generar un con su selector y sus puntos de interrupción; esencialmente el CMS debe generar un bloque de CSS.

Ejemplos

Esperemos que no les importe que comparta. Utilizamos este enfoque exacto cuando trabajamos en la página de inicio de Boston Consulting Group. (“nosotros” en este caso es mi empleador, Tahzoo)

BCG – Consultoría de gestión global

Carrera profesional en BCG