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?

回答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

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

来源：https://stackoverflow.com/questions/3673849/css-ie-version-of-style-background-colorrgba

标签

css

internet-explorer

background

opacity