CSS背景不透明与rgba不工作在IE 8
我正在使用这个CSS背景不透明的一个<div> ：
background: rgba(255, 255, 255, 0.3);
它在Firefox中工作正常，但不是在IE 8中。我如何使它工作？
创build一个大于1×1像素（谢谢thirtydot），并匹配您的背景的透明度的PNG。
编辑：回退IE6 +的支持，你可以指定png的bkgd块，这是一种颜色，将取代真正的alpha透明度，如果不支持。 你可以用gimp修复它。
在IE中模拟RGBA和HSLA背景，您可以使用梯度滤镜，具有相同的开始和结束颜色（alpha通道是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中工作，替代scheme是：
与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'); });
虽然晚了，但是我不得不今天使用它，并且在这里find了一个非常有用的php脚本，它可以让你dynamic地创build一个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
我知道这可能不是每个人的完美解决scheme，但在某些情况下值得考虑，因为它节省了大量的时间，并且完美无瑕。 希望帮助别人！
大多数浏览器都支持CSS中的RGBa代码，但只有IE8及以下级别不支持RGBa CSS代码。 对于这里是解决scheme。 对于你的解决scheme，你必须遵循这个代码，最好是顺其顺序，否则你不会得到完美的输出，如你所愿。 这个代码是我使用的，它大多是完美的。 如果它是完美的，请发表评论。
.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/
它使用渐变filter来显示纯色但透明的颜色。
在IE中使用rgba背景有一个后备。
我们必须使用filter属性。 使用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) 后备 rgba(255, 255, 255, 0.2)
根据你的改变#33ffffff 。
如何计算RGBA ARGB
这工作对我来解决IE8中的问题：
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
干杯
这是非常简单的，你必须先给你必须提供backgound作为rgb因为Internet Explorer 8将支持rgb，而不是rgba，然后你必须像filter:alpha(opacity=50);不透明filter:alpha(opacity=50);
background:rgb(0,0,0); filter:alpha(opacity=50);
这是大多数浏览器（包括IE x）的透明解决scheme
.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; }
目前为止，我发现的最好的解决scheme是David J Marland在他的博客中提出的支持旧版浏览器（IE 6+）的不透明性的解决scheme：
.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; }
这个解决scheme真的有用，试试吧。 在IE8中testing
.dash-overlay{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; }
search了很多后，我发现了下面的解决scheme，在我的情况下工作：
.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（对于IE），我们可以使用在线工具：
