1
Gracias

Unas palabras de agradecimiento nunca están de más.

Crear una DIV con trasparencia



¿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.

1
Gracias

Unas palabras de agradecimiento nunca están de más.

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net y director digital en el Grupo Figaro. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.

2 Comentarios