Ventana abierta al fondo del body: recortes en el background 19.8.15
Demo sobre cómo hacer posible recortes el el fondo (background) para permitir ver lo que hay detrás (eje z) del elemento (el fondo del body o de su antecesor).
Ventana abierta al fondo del body: recortes en el background
Una de las cuestiones que cada 2x3 es objeto de consulta en foros y páginas de ayuda sobre Css es cómo hacer para que un contenedor con un fondo permita ver en algunas zonas el background del body o de un ancestro.
Es cierto que no hay una herramienta*1 en css que nos permita hacer recortes, pero lo que Css no da, la imaginación lo suple.
Así que como siempre pasa en estos casos, sólo es cuestión de simular aquello que es imposible para obrar el milagro.
Todo pasa por conseguir que el contenedor general parezca que tiene un background pero sin tenerlo.
¿Un galimatías? No. Sigue leyendo para ver el ejemplo y comprenderlo mejor.
Recorte al background
Mira la demo de abajo: Una caja general con un fondo blanco y en un momento dado se crea un recorte o ventana que permite ver el background de la ventana:
See the Pen wabRWG by Kseso (@Kseso) on CodePen.
El planteamiento
Todo pasa por una caja donde colocar todos los elementos. Esta caja carece de fondo. Quien tiene declarado el background es el resto de elementos. Todos menos la "ventana al fondo".
#contenedor > * {
background: #fff;
margin: 0;
padding: 0 1em;
}
#contenedor .ventana {
background: transparent;
height:200px;
border: 1em solid #FFFFFF;
}
En el caso de la demo la "ventana" es el elemento <hr /> cuya finalidad es esa, crear un elemento visual que separe contenidos.
El resto de propiedades son sólo para acompañar. No hay más secreto que un poco de imaginación para suplir aquello que Css aún no permite.
*1: No considero las regiones de Css porque creo que aun es pronto para tenerlas presentes.
Artículo publicado originalmente el 22 de Abril de 2012. Con posterioridad publiqué otras formas que recogí en el post Abierto al fondo
 para permitir ver lo que hay detrás (eje z) del elemento (el fondo del body o de su antecesor).){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso