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中不正常。如何使其正常工作？
解决方案
创建一个大于1x1像素的PNG（感谢Thirtydot），并与您的背景的透明度匹配。
编辑：要返回IE6+支持，您可以为PNG指定BKGD块，这是一种颜色，如果不支持，它将替换真正的Alpha透明度。您可以使用gimp来解决它。
其他提示
要模拟IE中的RGBA和HSLA背景，您可以使用具有相同启动和最终颜色的梯度过滤器（Alpha Channel是HEX值中的第一对）
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
我相信这是最好的，因为在此页面上有一个工具来帮助您生成alpha-transparent背景：
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://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
我知道这可能不是每个人的完美解决方案，但是在某些情况下值得考虑，因为它节省了很多时间并完美无缺。希望对某人有帮助！
CSS中大部分都有所有浏览器支持RGBA代码，但只有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更改不透明度。为了应付即，您需要类似的东西：
.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-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)";
}
简而言之，您必须首先给您作为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;
}
到目前为止，我发现的最好的解决方案是David J Marland在他的 博客, ，支持旧浏览器中的不透明度（即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;
}
*重要的： 要计算RGBA的ARGB（对于IES），我们可以使用在线工具：
