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


110

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

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

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

Ответы:


73

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

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


2
Ага. rgba()значения цвета не поддерживаются в IE 8.
Пол Д. Уэйт,

11
Чтобы избежать потенциальной проблемы, используйте любой размер, кроме 1x1: stackoverflow.com/questions/7764751/…
30dot

43
Было бы приемлемо в 2003 году, но не в 2013 году. Либо используйте -ms-filter для некоторой имитации поддержки в старом IE, либо, что еще лучше, просто игнорируйте его. Люди, использующие IE8, заслуживают наказания за то, что не видят радиус границы, прозрачный фон и т. Д.
Евгений

21
@EugeneXa Я работаю для своих клиентов, а не наоборот. Если они используют IE8, то я его поддерживаю. Наказывать потенциальных клиентов - плохое дело.
Eli

14
@EugeneXa На моих сайтах около 10%, и они часто хорошие клиенты. Здесь нет однозначного правильного ответа. Посчитайте и выясните, что работает для вас. Для некоторых сайтов даже 6% могут быть огромными! Ни один пользователь не заслуживает наказания. Думаю, вы пожалеете о таком отношении.
Eli

241

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

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

2
это работает, но, к сожалению, он перестает работать, если элемент динамически скрывается и повторно отображается с помощью jQuery ...
jackocnr

Фильтр rgba IE был очень полезен, и я смог обойтись без> ie7
codingbbq

Какова непрозрачность фильтра 0,6?
Si8 05

10
Шестнадцатеричные коды прозрачности (первая пара) можно найти здесь: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295 06

2
Есть калькулятор для этих шестнадцатеричных значений IE!
nietonfir

14

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

« Кроссбраузерный альфа-прозрачный фон 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;
}

И помните, всегда используйте шестнадцатеричный цвет RGBA в фильтре: eq # 004F80 is # ed004F80
user956584

9

прозрачное изображение 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');
});

24
Фоновая альфа - это не то же самое, что непрозрачность (она также не делает прозрачным дочерний элемент).
Алексей Смоляков

1
Это ни ответ на вопрос, ни применение CSS через jQuery (или JavaScript в целом) как кроссбраузерное решение.
mystrdat 05

7

Хотя поздно, я должен был использовать , что сегодня и нашел очень полезный скрипт здесь , что позволит динамически создать файл 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

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


2
Как это работает - URL-адрес rgba.php запрашивается только браузерами, которые не поддерживают rgba? Или он всегда запрашивается всеми пользователями и просто не отображается?
Даррен Кук,

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

7

В основном все браузеры поддерживают код 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);
 }

5

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

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

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

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


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

3
@Paul D. Waite: Помимо того, как они отображают контент, браузеры предлагают множество функций. Отклонение от спецификации не является (или не должно быть) функцией.
Бобби Джек,

@Paul D. Waite: Хорошо, я понимаю вашу точку зрения, но я имею в виду, что разные версии IE действуют настолько по- разному, что мне приходится создавать разные таблицы стилей для каждой версии ... У меня разные таблицы стилей для IE6, 7 и 8 ... но у меня только одна таблица стилей для всех FF / Chrome / Opera / Safari. @Bobby Jack: Прикомандирован ...
ClarkeyBoy

@Bobby: Конечно, но IE 8 не отклоняется от стандартов больше, чем IE 7 или IE 6, конечно?
Пол Д. Уэйт,

@ClarkeyBoy: конечно. Я считаю, что моя таблица стилей IE 8 намного проще, чем моя таблица стилей IE 6. IE - самый странный из браузеров, но он медленно выравнивается с другими. Firefox не поддерживал rgba()до версии 3, а Opera не поддерживал его до версии 10.
Пол Д. Уэйт


2

Для использования 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


Давно искал этот конвертер ARGB в RGBA, спасибо! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Джастин

1

это помогло мне решить проблему в IE8:

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

ура


1

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

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

0

Это очень просто, сначала вы должны указать фон как rgb, потому что Internet Explorer 8 будет поддерживать rgb вместо rgba, а затем вам нужно указать непрозрачность, например filter:alpha(opacity=50);

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

0

Это решение прозрачности для большинства браузеров, включая 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;
}

0

Лучшее решение, которое я нашел до сих пор, - это предложение, предложенное Дэвидом Дж. Марландом в его блоге , для поддержки непрозрачности в старых браузерах (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;
}

0

После долгих поисков я нашел следующее решение, которое работает в моих случаях:

.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/
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.