set opacity of background color of div that works in ie7

2
votes

I want to set opacity of background of div. Means i want transparent background of div. It is very simple for browsers like chrome & firefox because rgba is supported.

But for ie7, i don't know how to do that. "filter: alpha(opacity=50);" is not useful to me, because i want transparent background, not content.

I also don't want transparent image to be set as background.

I have also tried ::before and apply "filter: alpha(opacity=50);", but it is also not working in ie.

Thank You.

3
htmlcss
I think you just have to tile a semi-transparent image. – ratbum

3 Answers

7
votes

Use a transparent image for the background for IE. It's annoying but it's the best way of doing what you want without getting stuck with opacity on the text. Or just go mental with the filters...

.opacityTest{
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
0
votes
<style>
div
{
filter: alpha(opacity=50);
}
</style>
0
votes

I think you'll have to use a transparent background image for IE LTE < 7 (with some conditional comment/css)