Непрозорість фонового зображення CSS з rgba не працює в IE 8

Я використовую цей CSS для непрозорості фону <div>:

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

Це добре працює у Firefox, але не в IE 8. Як змусити його працювати?

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

EDIT: щоб повернутися до підтримки IE6 +, ви можете вказати шрифт bkgd для png, це колір, який замінить справжню прозорість альфа, якщо він не підтримується. Ви можете виправити це за допомогою gimp, наприклад.

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

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

Я вважаю, що це найкраще, тому що на цій сторінці є інструмент, який допоможе вам генерувати прозорий фон:

" Перехресний альфа-прозорий браузер CSS (rgba) " ^{_{(* тепер пов'язаний з archive.org)}}

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

прозоре 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');
});

Хоча пізно, я повинен був використовувати , що сьогодні і знайшов дуже корисний скрипт тут , що дозволить динамічно створити файл PNG, подібно до того як Rgba робіт.

background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);

Сценарій можна завантажити тут: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Я знаю, що це може бути не ідеальним рішенням для всіх, але це варто розглянути в деяких випадках, оскільки це економить багато часу і працює бездоганно. Сподіваюся, що хтось допомагає!

Код RGBa з підтримкою браузера в CSS здебільшого підтримується, але лише IE8 і нижче рівня не підтримує код css RGBa. Для цього ось рішення. Для рішення ви повинні дотримуватися цього коду, і краще піти з його послідовністю, інакше ви не отримаєте ідеального результату, як хочете. Цей код використовується мною і в основному ідеальний. коментуйте, якщо це ідеально.

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

Ви використовуєте css для зміни непрозорості. Щоб впоратися з IE, вам знадобиться щось на кшталт:

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

Але єдина проблема з цим полягає в тому, що це означає, що все, що знаходиться всередині контейнера, також буде 0,3 непрозорості. Таким чином, вам доведеться змінити свій HTML, щоб мати інший контейнер, а не прозорий, який містить ваш вміст.

Інакше техніка png працювала б. За винятком того, що вам знадобиться виправлення IE6, що саме по собі може спричинити проблеми.

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

Він використовує градієнтний фільтр для відображення твердого, але прозорого кольору.

Для використання 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

це працювало для мене, щоб вирішити проблему в IE8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

Ура

Це рішення справді працює, спробуйте. Випробувано в IE8

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}

Вам дуже просто потрібно дати спочатку ви повинні дати backgound як rgb, тому що Internet Explorer 8 буде підтримувати rgb замість rgba, а потім вам доведеться надати непрозорість, як filter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);

Це рішення щодо прозорості для більшості браузерів, включаючи IE x

.transparent {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

Найкраще рішення, яке я знайшов поки що, - це запропоноване Девідом Дж Марландом у своєму блозі , щоб підтримати непрозорість у старих браузерах (IE 6+):

.alpha30{
    background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */ 
    background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
    zoom: 1; /* needed for IE 6-8 */
}

/* 
 * CSS3 selector (not supported by IE 6 to IE 8),
 * to avoid IE more recent versions to apply opacity twice
 * (once with rgba and once with filter)
 */
.alpha30:nth-child(n) {
    filter: none;
}

Після багато пошуків я знайшов таке рішення, яке працює в моїх випадках:

.opacity_30{
    background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */ 
    background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
    zoom: 1; /* Hack needed for IE 6-8 */
}

/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
    filter: none;
}

* Важливо: Для обчислення ARGB (для IE) від RGBA ми можемо використовувати онлайн-інструменти:

1. https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
2. http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/