Foros del Web » Creando para Internet » CSS »

Opacity de CSS3

Estas en el tema de Opacity de CSS3 en el foro de CSS en Foros del Web. Hola es la primera vez que uso transparencias y funciona en los navegadores que tengo yo por lo menos. Pero el problema es que se ...
  #1 (permalink)  
Antiguo 31/10/2010, 16:34
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Opacity de CSS3

Hola es la primera vez que uso transparencias y funciona en los navegadores que tengo yo por lo menos. Pero el problema es que se hereda la transparencia y aunque pongo el valor menos transparente para que se muestre sólido de todos modos lo hace. Resumiendo la estructura es así.


Código HTML:
<body>

<div id="contenedor">

<p>....</p>

</div>


</body> 

Y el CSS

b
Código CSS:
Ver original
  1. ody { background: url(../Pictures/piedraazul.png) #E1FFFF;
  2.        margin:0;
  3.        padding: 0}
  4.  
  5. #contenedor { opacity:.8 ;
  6.                          background: #FFF;
  7.              width: 45&#37;;
  8.              margin:0 auto;
  9.              height: 800px;
  10.              padding: 7% 5% }
  11.  
  12. p {background: #FFF;
  13.      opacity: 1.0;
  14.      }



Los textos deberían verse con un fondo blanco solido, pero no lo hace. Si cambio el color a por ejemplo un rojo cambia pero sigue con la misma transparencia aunque indique lo contrario. También noté que le puedo agregar más transparencia, pero no quitar. Lo único que se me ocurre para que se vea de un color sólido es poner el texto fuera y luego posicionarlo dentro del contenedor, pero no quiero hacer esto.

¿Sucede esto por qué esta técnica aún es nueva o por qué?
¿Cuándo se estima estará lista la nueva CSS3?
Saludos

Última edición por Mariela_Fiad; 31/10/2010 a las 16:43
  #2 (permalink)  
Antiguo 01/11/2010, 03:21
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Opacity de CSS3

usa colores rgba para css3, y todavia mas compatible, usa imagenes con canales alpha (png)

compatible firefox, opera, safari y chrome
Código CSS:
Ver original
  1. background-color: rgba( 255, 255, 255, 0.8);

compatible con el resto menos IE6
Código CSS:
Ver original
  1. background-image: url("tu_imagen_con_semitransparencia.png");

Edito (me falto explicacion):

En efecto, lo que pasa con este atributo es que se hereda a todos los hijos, y no puedes revertir el efecto

por ejemplo, si tienes un div con opacidad de 8, y dentro tienes un p con opacidad de 7, su opacidad real seria

10 - ( (10 - 8) + (10 -7) ) = 5

la mejor practica de esto en css3, seria utilizar fondo semitransparente, ya que solo afectara al fondo, no al elemento, esto puede ser con rgba

rgba( rojo, verde, azul, opacida)

pero desafortunadamente esto aun no es 100% compatible, ya que yo sugeriria utilizar imagenes png semitransparentes, ya que el tan famoso y tan odiado ie no soporta rrgba aun, solo hasta le vercion 9
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]

Última edición por danneg; 01/11/2010 a las 03:29 Razón: Me falto explicacion

Etiquetas: opacity
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:14.