CSS3 PIE Forums
http://css3pie.com/forum/

Opacity disappears when using border radius.
http://css3pie.com/forum/viewtopic.php?f=6&t=2132
Page 1 of 1

Author:  Zippy1970 [ Thu Sep 19, 2013 4:29 am ]
Post subject:  Opacity disappears when using border radius.

This works:

Code:
.somestyle {
  -moz-opacity: 0.75;
  opacity:0.75;
  filter:alpha(opacity=75); /* For IE8 and earlier */
  border-radius: 10px;
}


although it (obviously) does not show rounded corners on IE8 and earlier.

But as soon as I add CSS3PIE:

Code:
.somestyle {
  -moz-opacity: 0.75;
  opacity:0.75;
  filter:alpha(opacity=75); /* For IE8 and earlier */
  border-radius: 10px;
  behavior: url(PIE.htc);
}


opacity is set to 100%. I do get rounded corners. I've tried both v1.0.0 and v2.0-beta with the same results. Oddly enough I can distinctly remember it used to work. So I'm not sure what changed.

Author:  xem [ Wed Sep 25, 2013 7:22 am ]
Post subject:  Re: Opacity disappears when using border radius.

You should try border-radius + rgba background, instead of border-radius + opacity.

background: rgba(0,0,0,0.5) is similar to background: #000 + opacity: 50%.

Author:  Zippy1970 [ Fri Sep 27, 2013 4:47 am ]
Post subject:  Re: Opacity disappears when using border radius.

Yes, but I want the entire container to become semi-transparent, not the background only.

Author:  jason [ Sat Sep 28, 2013 9:51 pm ]
Post subject:  Re: Opacity disappears when using border radius.

https://github.com/lojjic/PIE/issues/46

Unfortunately I don't see a way to do this accurately, so I don't expect it will ever work.

Author:  xem [ Thu Oct 03, 2013 2:21 am ]
Post subject:  Re: Opacity disappears when using border radius.

Why not using rgba for your backgrounds + opacity for your content?

Code:
<div class=somestyle>       <-- container, gets rgba background
  <div class=inner>         <-- inner div with no background, gets opacity
    blabla                  <-- content to opacify
  </div>
</div>

Author:  pravinsapkal [ Tue Dec 03, 2013 9:56 am ]
Post subject:  Re: Opacity disappears when using border radius.

rgba cannot be used because IE8 does not support rgba.

Is there a way to add opacity in IE8 with css3pie?

Much appreciated, thanks.

Author:  xem [ Mon Dec 09, 2013 8:06 am ]
Post subject:  Re: Opacity disappears when using border radius.

Yes, you can use rgba background on IE<9 with CSS3Pie.
Just do that in the "parent" div, and put your opacity in your "child" div

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/