Crear una DIV con trasparencia

Julio 2017


¿Deseas crear una DIV transparente? Esto muy sencillo, tan solo tienes que utilizar una de las técnicas CSS:

Volver la DIV y su contenido transparente

  • La div y su contenido serán transparentes, imágenes y texto.


<div style="filter:alpha(opacity=50); opacity:0.5;">........</div>


La propiedad opacity es compatible con firefox 3+, Chrome 2+, Safari 4 (3 no ha sido probado) y Opera 10. La propiedad filter:alpha(opacity=50) permite a Internet Explorer 9 (no 7) y Opera 9.x crear la transparencia.

Volver la DIV transparente pero no el contenido


Utilizar la futura propiedad "rgba" de CSS


Para poner color en CSS, utilizamos la propiedad rgb(). Pronto podrá ser utilizada la función rgba(). La “a” es el canal alfa, la transparencia:

<div style="background-color: rgba(255, 0, 0, 0.5)">………</div>


Aquí el color será rojo transparente.
Este función no es reconocida por Internet Explorer ni por Opera 9.x (pero si por Opera 10).

Truco


Tomamos una <div> contenedor de texto e imágenes. Dentro, ponemos una div abierta y la cerramos inmediatamente. Vacía. Esto es lo que permite volver el fondo transparente, sin afectar al texto. La DIV vacía será estirada al borde de la DIV contenedor pero detrás de ésta.

Ejemplo:
<div style="position: relative; z-index: 10;">
   <div style="	background-color: #f00; position:absolute; z-index:-1; top:0; left:0; right:
0; bottom:0; opacity:0.2;"></div>
   ……
   ……
</div>
  • Si la primera DIV posee un posicionamiento relativo, es para poner la z-index
  • La div que permite la transparencia posee el posicionamiento absoluto y está a 0 px de cada borde para que recubra la primera DIV y una z-index de -1 para ponerla bajo la primera.

Consulta también

Artículo original escrito por . Traducido por Carlos-vialfa. Última actualización: 18 de septiembre de 2009 a las 22:45 por Carlos-vialfa.
El documento «Crear una DIV con trasparencia» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.