CSS：IE：样式“ background-color：rgba（…）”的版本

Question

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?

Answer 1

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

Answer 2

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