CSS: IE: версия стиля "background-color: rgba (...)" - PullRequest
Новая
       3

CSS: IE: версия стиля "background-color: rgba (...)"

2 голосов
/ 09 сентября 2010

У меня есть требование иметь div с фоновым изображением, а поверх этого изображения должен быть черный слой с непрозрачностью 0,7.

Для этого я использую: 

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

Это прекрасно работает во всем, кроме IE. В IE 6, 7 и 8 background-color:rgba(0, 0, 0, 0.7); не отображается.

Могу ли я что-нибудь сделать в CSS без изменения разметки для создания черного слоя с затемненной непрозрачностью поверх фонового изображения? Какой-то стиль "фильтра"?

Ответы [ 2 ]

4 голосов
/ 09 сентября 2010

Нет.Единственные опции, которые у вас есть, это ms-фильтры или немного другие. 

<!--[if IE]>

   <style type="text/css">

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

    </style>

<![endif]-->

посмотрите и эту: http://www.hedgerwow.com/360/dhtml/rgba/demo.html

2 голосов
/ 21 марта 2013

У меня была похожая проблема, и чтобы преодолеть ее, я использовал классы на моем модальном div, один для непрозрачности фона и т. Д., Другой просто для отображения счетчика. Похоже, этот маршрут работает для всех текущих браузеров, на которых я тестировал. 

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