Непрозрачность фона CSS с rgba не работает в IE 8 - PullRequest
Новая
       112

Непрозрачность фона CSS с rgba не работает в IE 8

109 голосов
/ 20 октября 2010

Я использую этот CSS для непрозрачности фона <div>: 

background: rgba(255, 255, 255, 0.3);

Он отлично работает в Firefox, но не в IE 8. Как мне заставить его работать?

Ответы [ 15 ]

241 голосов
/ 20 октября 2010

для имитации фона RGBA и HSLA в IE, вы можете использовать градиентный фильтр с одинаковым начальным и конечным цветом (альфа-канал является первой парой в значении HEX) 

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
72 голосов
/ 20 октября 2010

Создайте png размером более 1x1 пикселя (спасибо тридцать точек), который соответствует прозрачности вашего фона.

РЕДАКТИРОВАТЬ: для поддержки IE6 +, вы можете указать bkgd chunk для png, это цвет, который заменит истинную альфа-прозрачность, если она не поддерживается. Вы можете исправить это с GIMP, например.

14 голосов
/ 06 января 2014

Я считаю, что это лучшее, потому что на этой странице есть инструмент, который поможет вам создать альфа-прозрачный фон:

http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css

#div {
    background:rgb(255,0,0);
    background: transparent\9;
    background:rgba(255,0,0,0.3);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;
}
9 голосов
/ 20 октября 2010

прозрачное изображение PNG не будет работать в IE 6, альтернативы:

с CSS: 

.transparent {

    /* works for IE 5+. */
    filter:alpha(opacity=30); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.3; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.3; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.3; 
}

или просто сделайте это с помощью jQuery: 

// a crossbrowser solution
$(document).ready(function(){ 
    $(".transparent").css('opacity','.3');
});
7 голосов
/ 23 мая 2014

В основном все браузеры поддерживают код RGBa в CSS, но только IE8 и ниже уровня не поддерживают код RGBa CSS. Для этого здесь есть решение. Для решения вы должны следовать этому коду, и лучше следовать его последовательности, иначе вы не получите идеальный результат, как вы хотите. Этот код используется мной, и он в основном идеален. оставьте комментарий, если он идеален. 

.class
 {
        /* Web browsers that does not support RGBa */
        background: rgb(0, 0, 0);
        /* IE9/FF/chrome/safari supported */
        background: rgba(0, 0, 0, 0.6);
        /* IE 8 suppoerted */
        /* Here some time problem for Hover than you can use background color/image */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
        /* Below IE7 supported */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
 }
7 голосов
/ 19 марта 2013

Хотя поздно, мне пришлось использовать это сегодня и найти очень полезный php-скрипт здесь , который позволит вам динамически создавать png-файл, так же, как работает rgba.

Сценарий можно скачать здесь: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Я знаю, что это не может быть идеальным решением для всех, но в некоторых случаях его стоит рассмотреть, поскольку он экономит много времени и работает без нареканий.Надеюсь, это кому-нибудь поможет!

5 голосов
/ 20 октября 2010

Вы используете css для изменения непрозрачности. Чтобы справиться с IE, вам понадобится что-то вроде: 

.opaque {
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

Но единственная проблема в том, что это означает, что что-либо внутри контейнера также будет иметь непрозрачность 0,3 Таким образом, вам придется изменить свой HTML, чтобы иметь другой контейнер, а не внутри прозрачного, который содержит ваш контент.

В противном случае техника png будет работать. За исключением того, что вам нужно исправление для IE6, которое само по себе может вызвать проблемы.

4 голосов
/ 15 января 2013

Я опаздываю на вечеринку, но для всех, кто найдет это, эта статья очень полезна: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

В ней используется градиентный фильтр для отображения сплошного, но прозрачного цвета.

2 голосов
/ 21 мая 2014

Для использования rgba фона в IE существует запасной вариант.

Мы должны использовать свойство фильтра. который использует ARGB

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

это запасной вариант для rgba(255, 255, 255, 0.2)

Измените #33ffffff в соответствии с вашим.

Как рассчитать ARGB для RGBA

1 голос
/ 13 мая 2015

Это решение действительно работает, попробуйте.Протестировано в IE8 

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}
Страница:
...