1

I'm trying to get transparency to work in IE8. All of the solutions I've seen are for the background color, but I'm trying to get it to work for the foreground color.

I want to get this effect in IE8 (the colors are user generated so an approximate mixed color solution won't work as these aren't the target colors)

HTML:

<div>testing</div>
<span>testing</span>

CSS:

div {
    color: rgba(255, 0, 0, .5);
}
span {
    color: red
}
body {
    background: green;
}

http://jsfiddle.net/6L2DZ/

Spudley
  • 166,037
  • 39
  • 233
  • 307
MosheK
  • 1,196
  • 1
  • 9
  • 16

3 Answers3

1

There isn't a native way to do this in IE8 in CSS. IE8 does not support CSS rgba colours. End of story.

The only way you'll achieve this is to use a polyfill script, and the only polyfill script that I know that can do rgba colours in IE8 is CSS3Pie.

Using CSS3Pie will add support for rgba colours in some contexts, but not for text colours. It works for background colours and gradient colours, but not text.

Therefore, I don't think that what you're looking for can actually be done in the way you want.

You might get some success by putting your text into its own separate element, and setting an opacity for that element. Since the only thing in the element is your text, it would have a similar effect as if you had given the text a transparency effect using rgba. That's not ideal, but it's about the only solution I can think of that would actually work.

Spudley
  • 166,037
  • 39
  • 233
  • 307
0

Try this: filter: alpha(opacity=75);

Or this: Opacity CSS not working in IE8

Community
  • 1
  • 1
Gimmy
  • 3,781
  • 2
  • 18
  • 27
0

I followed what is stated here: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Did work when I needed to do something like that :D

Omar
  • 689
  • 3
  • 16