"Muchacha en la ventana" de Dalí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 imagen 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:
Y aquí puedes ver un ejemplo: Ventana al fondo del body
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;
}
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.
+Kseso
No hay comentarios:
Publicar un comentario en la entrada
Suscríbete a los comentarios del artículo, así recibirás un aviso en tu correo cuando otro lector publique una respuesta.
En las entradas con más de 60 días están moderados.
Tags permitidas: <b> <i> <a href=""> y para códigos usa <em>