CODEWITHSUNDEEP
cssinternet-explorerbackgroundopacity
foobarbarfoo
foobarbarfoo

Reputation: 369

CSS: IE: Version of style "background-color:rgba(...)"

I have a requirement to have a div with a background image, and overtop that image should be a 0.7-opacity black layer.

For this, I'm using:

background-color:rgba(0, 0, 0, 0.7);
background-image:url(/Images/hash-000000-pattern.gif);

This works perfectly in everything but IE. In IE 6, 7, and 8, the background-color:rgba(0, 0, 0, 0.7); isn't rendered.

Is there anything I can do in CSS without changing the markup to create a dimmed-opacity black layer over the background image? Some "filter" style?

Upvotes: 2

Views: 4147

Answers (2)

julesanime
julesanime

Reputation: 21

I had a similar issue and to over come it I used to classes on my modal div one for the background opacity etc.. the other just to display the spinner. This route seems to work for all current browsers I've tested on.

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;    
    background: rgba(255,255,255, .8);
    background-color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.spinner{
    z-index: 1010;
    background-image: url(/_Layouts/Images/GEARS_AN.GIF);
    background-position: 50% 50%;
    background-repeat: no-repeat;    
}

Upvotes: 2

Moin Zaman
Moin Zaman

Reputation: 25455

No. The only options you have are ms-filters or a slightly different one.

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

see this one too: http://www.hedgerwow.com/360/dhtml/rgba/demo.html

Upvotes: 4

Related Questions