2011-03-22 27 views
5

me di cuenta de que con CSS comoPIE CSS: RGBA fondos + caja de sombras

body { 
    background: #f00; 
} 
div { 
    background: rgba(255,255,255,0.4); 
    -pie-background: rgba(255,255,255,0.4); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    padding: 50px; 
    behavior: url(PIE.htc); 
} 

voy a tener el siguiente en Firefox & IE/PIE

es posible arreglar eso ? la sombra de la caja que se muestra a través del fondo rgba?

Respuesta

5

Malas noticias para usted: Parece que no funciona.

Según el sitio web CSS3Pie, es compatible con los colores RGBA, pero ...

Actualmente todas las etapas de color sean impuestos totalmente opaco, incluso si la especificación de un valor de color RGBA. Esto se debe a una limitación en la sintaxis de gradiente lineal de VML que no permite establecer la opacidad para paradas de color individuales.

(ver http://css3pie.com/documentation/supported-css3-features/)

También han registrado una entrada para ella: https://github.com/lojjic/PIE/issues#issue/7

+0

erm, no es en realidad gradientes, para que esto funcione realmente, PIE tendrá que de alguna manera "máscara" la sombra directamente debajo del fondo ... –

+0

@jiewmeng: eso es lo que la 'A' está en RGBA - es el canal alfa, que da semitransparencia. Ese es el efecto que está tratando de usar, pero PIE no lo admite, por lo que solo usa el valor RGB e ignora el A, que es lo que está causando su problema. – Spudley

Cuestiones relacionadas