5

I noticed that with CSS like 

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);
}

I will get the below in FireFox & IE/PIE

is it possible to fix that? the box shadow showing through the rgba background?

Drew Gaynor
  • 8,292
  • 5
  • 40
  • 53
JM at Work
  • 2,417
  • 7
  • 33
  • 46

1 Answers1

5

Bad news for you: It doesn't look like it works.

According to the CSS3Pie website, it supports RGBA colours, but...

Currently all color stops are rendered fully opaque, even if specifying an rgba color value. This is due to a limitation in VML's linear gradient syntax which does not allow setting opacity for individual color stops.

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

They also have a ticket logged for it: https://github.com/lojjic/PIE/issues#issue/7

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • erm, its not actually gradients, for this to actually work, PIE will have to somehow "mask" the shadow directly under the the background ... – Jiew Meng Mar 22 '11 at 14:59
  • @jiewmeng: that's what the 'A' is in RGBA - it's the Alpha chanel, which gives semi-transparency. That's the effect he's trying to use, but PIE doesn't support it, so it's just using the RGB value and ignoring the A, which is what is causing his problem. – Spudley Mar 22 '11 at 16:03