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

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

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

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

109 голосов | спросил Moon 20 +04002010-10-20T11:41:11+04:00312010bEurope/MoscowWed, 20 Oct 2010 11:41:11 +0400 2010, 11:41:11

12 ответов


0

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

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

ответил MatTheCat 20 +04002010-10-20T11:44:24+04:00312010bEurope/MoscowWed, 20 Oct 2010 11:44:24 +0400 2010, 11:44:24
0

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

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
ответил diablero13 20 +04002010-10-20T15:25:29+04:00312010bEurope/MoscowWed, 20 Oct 2010 15:25:29 +0400 2010, 15:25:29
0

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

http://hammerspace.co.uk/2011/10 /кросс-браузер-альфа-прозрачный фон 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;
}
ответил ahgood 6 Jpm1000000pmMon, 06 Jan 2014 12:19:02 +040014 2014, 12:19:02
0

Хотя и поздно, мне пришлось использовать это сегодня и найти очень полезный PHP-скрипт здесь , что позволит вам динамически создавать 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-содержание /добавления /2009/02 /rgba.zip

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

ответил Camilo Delvasto 19 MarpmTue, 19 Mar 2013 20:48:23 +04002013-03-19T20:48:23+04:0008 2013, 20:48:23
0

В основном все браузеры поддерживают код 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);
 }
ответил pratik1020 23 Maypm14 2014, 16:35:47
0

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

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

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

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

ответил Coin_op 20 +04002010-10-20T12:19:23+04:00312010bEurope/MoscowWed, 20 Oct 2010 12:19:23 +0400 2010, 12:19:23
0

Я опаздываю на вечеринку, но для всех, кто найдет это, эта статья очень полезна: http://kilianvalkhof.com/10/0 XHTML /как в использовании-RGBA-в-т /

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

ответил Alex Harford 15 Jam1000000amTue, 15 Jan 2013 02:08:15 +040013 2013, 02:08:15
0

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

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

Приветствия

ответил Guille 10 J0000006Europe/Moscow 2013, 21:57:40
0

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

background:rgb(0,0,0);
filter:alpha(opacity=50);
ответил kartik singh 9 AMpWed, 09 Apr 2014 09:22:56 +040022Wednesday 2014, 09:22:56
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;
}
ответил Ahmad 1 Jpm1000000pmThu, 01 Jan 2015 16:15:33 +030015 2015, 16:15:33
0

Лучшее решение, которое я нашел до сих пор, - это предложение, предложенное Дэвидом Марлендом в его blog , чтобы поддерживать прозрачность в старых браузерах (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;
}
ответил clami219 3 MarpmTue, 03 Mar 2015 20:05:15 +03002015-03-03T20:05:15+03:0008 2015, 20:05:15
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 /как в использовании-RGBA-в-т /
  2. http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
ответил Reza Mamun 23 PM000000100000002031 2016, 22:35:20

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132