Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/03/2015, 00:24
ulisesc
 
Fecha de Ingreso: abril-2014
Mensajes: 9
Antigüedad: 10 años
Puntos: 0
Pregunta crear un agujero (hueco) en un div

Hola, pues esa sería la pregunta... Me explico.

Una parte de la página, practicamente toda, va a ser de un color, y la idea es que en el medio haya un agujero para dejar ver la información que hay debajo (un mapa).
Mi interés es crear ese agujero en medio de la página con la hoja de estilos. Es posible o hay que tirar si o si, de J.S. o algún otro lenguaje??

Sería algo así:

<html style="width: 100%; height: 100%; margin: 0; padding: 0; text-align: center;">
<body style="margin: 0; padding: 0;">
<div id="menu">
--
--
--
--
</div>
<!-- ahora la pagina completa de un color plano -->
<div id="main_box" style="width: 100%; height: 100%; background-color: #e1f7eb">
<!-- tiene unas medidas y un color, lo que quiero es, un círculo en medio de este div que sea transparente, y se pueda ver la capa de abajo, que sería un mapa -->

<div id="map-area" style="width: 100%; height: 75%;">
</div>
<div id="action Box">
</div >

Otra opción que estudio es que el fondo sea una imagen, color plano con un agujero como yo quiero, pero hay dos problemas. Al redimensionar la página el agujero varía de tamaño y ¿se puede dar un valor de transparencia a una imagen??
sería algo así:

<html style="width: 100%; height: 100%; margin: 0; padding: 0; text-align: center;">
<body style="margin: 0; padding: 0;">
<div id="menu">
--
--
--
--
</div>
<!-- pagina completa -->
<div id="main_box" style="width: 100%; height: 100%; background-image: url(fondo.png); background-repeat: no-repeat; background-size: cover;">

<div id="map-area" style="width: 100%; height: 75%;">
</div>
<div id="action Box">
</div >

Perdón por el tocho!!