带有 rgba 的 CSS 背景不透明度在 IE 8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3975688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background opacity with rgba not working in IE 8
提问by Moon
I am using this CSS for background opacity of a <div>:
我正在使用此 CSS 来实现 a 的背景不透明度<div>：
background: rgba(255, 255, 255, 0.3);
It's working fine in Firefox, but not in IE 8. How do I make it work?
它在 Firefox 中工作正常，但在 IE 8 中却没有。我如何使它工作？
采纳答案by MatTheCat
Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.
创建一个大于 1x1 像素的 png（感谢三十点），并且与背景的透明度相匹配。
EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.
编辑：为了支持 IE6+，您可以为 png 指定 bkgd 块，这是一种颜色，如果不支持，它将替换真正的 alpha 透明度。你可以用 gimp 例如修复它。
回答by diablero13
to simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color ( alpha channel is the first pair in the value of HEX )
要在 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 */
回答by ahgood
I believe this is the best because on this page has a tool to help you generate alpha-transparent background:
我相信这是最好的，因为在此页面上有一个工具可以帮助您生成 alpha 透明背景：
"Cross browser alpha transparent background CSS (rgba)" (*now linked to archive.org)
“跨浏览器 alpha 透明背景 CSS (rgba)” （*现在链接到 archive.org）
#div {
background:rgb(255,0,0);
background: transparent;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}
回答by Thomas
the transparent png image will not work in IE 6-, alternatives are:
透明的 png 图像在 IE 6- 中不起作用，替代方法是：
with CSS:
使用 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;
}
or just do it with jQuery:
或者只是用jQuery来做：
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
回答by Pratik 1020
There are mostly all browser support RGBa code in CSS but only IE8 and below level does not support RGBa css code. For This here is solution. For The solution you must follow this code and it's better to go with it's sequence otherwise you will not get perfect output as you wish. This code is used by me and it's mostly perfect. make comment if it's perfect.
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);
}
回答by Camilo Delvasto
Though late, I had to use that today and found a very useful php script herethat will allow you to dynamically create a png file, much like the way rgba works.
虽然晚了，但我今天不得不使用它，并在这里找到了一个非常有用的 php 脚本，它允许您动态创建一个 png 文件，就像 rgba 的工作方式一样。
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
The script can be downloaded here: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
脚本可以在这里下载：http: //lea.verou.me/wp-content/uploads/2009/02/rgba.zip
I know it may not be the perfect solution for everybody, but it's worth considering in some cases, since it saves a lot of time and works flawlessly. Hope that helps somebody!
我知道它可能不是适合所有人的完美解决方案，但在某些情况下值得考虑，因为它可以节省大量时间并且可以完美运行。希望对某人有所帮助！
回答by Coin_op
You use css to change the opacity. To cope with IE you'd need something like:
您使用 css 来更改不透明度。要处理 IE，您需要类似的东西：
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
But the only problem with this is that it means anything inside the container will also be 0.3 opacity. Thus you'll have to change your HTML to have another container, not inside the transparent one, that holds your content.
但唯一的问题是这意味着容器内的任何东西的不透明度也将是 0.3。因此，您必须更改 HTML 以拥有另一个容器，而不是在透明容器内，用于保存您的内容。
Otherwise the png technique, would work. Except you'd need a fix for IE6, which in itself could cause problems.
否则 png 技术会起作用。除非您需要修复 IE6，这本身可能会导致问题。
回答by Alex Harford
I'm late to the party, but for anyone else who finds this - this article is very useful: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
我参加聚会迟到了，但对于其他发现此问题的人 - 这篇文章非常有用：http: //kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
It uses the gradient filter to display solid but transparent colour.
它使用渐变过滤器来显示纯色但透明的颜色。
回答by shyammakwana.me
To use rgbabackground in IE there is a fallback.
要rgba在 IE 中使用背景，有一个回退。
We have to use filter property. that uses ARGB
我们必须使用过滤器属性。使用ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
this is fallback forrgba(255, 255, 255, 0.2)
这是后备rgba(255, 255, 255, 0.2)
Change #33ffffffaccording to yours.
#33ffffff根据你的变化。
How to calculate ARGBfor RGBA
如何计算ARGB的RGBA
回答by Rohit
This solution really works, try it. Tested in IE8
这个解决方案确实有效，试试吧。在 IE8 中测试
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
