Cómo crear una transparencia con CSS
Escrito por Jordi Soro (Guepmascle) el 09 - 10 - 2008 • Diseño web , Internet
No se si será algo poco normal o lo más habitual del mundo, pero yo me he encontrado con esta necesidad en varias ocasiones y lo cierto es que cuando conoces la solución no es nada complicado, todo lo contrario.
Para conseguir esta transparencia en un objeto utilizaremos la propiedad opacity y lo mejor de esta propiedad es que la entienden todos los navegadores, lo malo es que no se lo tenemos de decir de la misma manera a Explorer ,Firefox, Opera o Mozilla, así que vamos a explicarnos:
Si deseamos tener una opacidad del 70% con Firefox o Opera, en el CSS utilizaremos la propiedad así:
opacity: .7
mientras que si el 70% de opacidad lo queremos para Internet Explorer, utilizaremos la propiedad así:
filter:alpha(opacity=70)
En definitiva, lo que debemos poner en el CSS para no tener problemas con los navegadores más populares del momento es:
filter:alpha(opacity=70); opacity: .7
Añadimos gracias a la aportación de Miquel Viladomat:
-moz-opacity:0.7
Para versiones antiguas de Firefox
-khtml-opacity: 0.7
Para versiones antiguas de Safari
Loading ...
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D22730699.-%3B)
[...] Leyendo Ateneu Popular veo un pequeño tip para crear transparencias bajo CSS, el uso del filtro opacity nos ayudará en ello. [Enlace] [...]
Interesante articulo.
Yo añadiria:
-moz-opacity:0.7 Para versiones antiguas de Firefox(este lo considero bastante importante)
-khtml-opacity: 0.7 Para versiones antiguas de Safari(quizas prescindible, pero no cuesta nada ponerlo)
Gracias por la aportación Miquel, ya esta añadida.
Como hariamos, si le ponemos opacity a un div, pero que un p oo un h3 no la coja ( ya he probado a darles 100 de opacity)
Ahí es donde me encuentro yo también Ismael, ya que todo lo que esta dentro del div coje la misma opacidad que el div en cuestión por mucho que le pongamos una opacidad 100 al parágrafo.
A ver si Arzet sabe de alguna forma para hacerlo.