Осторожность фона CSS с RGBA не работает в IE 8
https://stackoverflow.com/questions/3975688
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я использую это CSS для фона непрозрачности <div>:
background: rgba(255, 255, 255, 0.3);
Он работает нормально в Firefox, но не в IE 8. Как я могу сделать это работать?
Решение
Создайте PNG, который больше 1x1 пикселей (спасибо thirtydot), и который соответствует прозрачности вашего фона.
Редактировать: Чтобы упасть на поддержку IE6 +, вы можете указать BKGD Chank для 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 */
Я верю, что это лучшее, потому что на этой странице есть инструмент, который поможет вам генерировать альфа-прозрачный фон:
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;
}
Прозрачное изображение 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');
});
Хотя поздно я должен был использовать это сегодня и нашел очень полезный сценарий PHP здесь Это позволит вам динамично создать файл PNG, как и работает, как работает RGBA.
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
Сценарий можно скачать здесь: http://leaea.verou.me/wp-content/uploads/2009/02/rgba.zip.
Я знаю, что это не может быть идеальным решением для всех, но стоит учитывать в некоторых случаях, поскольку он экономит много времени и работает безупречно. Надеюсь, что поможет кому-то!
Существуют в основном все Browser поддерживают код 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);
}
Вы используете 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-us-Irgba-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;
}
Лучшее решение, которое я нашел до сих пор, предложен Давидом Дж Марланд в его блог, поддержать непрозрачность в старых браузерах (т.е. 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 (для IES) из RGBA, мы можем использовать онлайн-инструменты:
