css 不透明度在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11516680/
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 opacity not working in IE
提问by vvMINOvv
I've literally thrown in every opacity option I know of and it's still not changing the opacity,
我真的把我知道的每个不透明度选项都扔了，但它仍然没有改变不透明度，
your not supposed to see a blue box
what to do?
该怎么办？
回答by vvMINOvv
opacity does not work on pseudo objects in IE 10,9,8
不透明度不适用于 IE 10,9,8 中的伪对象
Try this code:
试试这个代码：
HTML:
HTML:
<div></div>
CSS:
CSS:
div{
width:100px;
height: 100px;
background: blue;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
div:after{
content: ' ';
position: absolute;
width:100px;
height: 100px;
left: 200px;
background: blue;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
What you're supposed to see is two squares both semi transparant. However IE disregards the opacity properties for the pseudo item, and it renders it completely opaqe.
你应该看到的是两个半透明的正方形。然而，IE 忽略了伪项目的不透明度属性，并且将其呈现为完全不透明。
回答by Johannes Stadler
Another solution for IE9+, FF 3+, Chrome, Safari 3+ and Opera 10+is using rgba as background color value. See http://jsfiddle.net/uRgfu/4/
IE9+、FF 3+、Chrome、Safari 3+ 和 Opera 10+ 的另一个解决方案是使用 rgba 作为背景颜色值。见http://jsfiddle.net/uRgfu/4/
<style type="text/css">
.color-block {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
To support older IE versionstoo, you can add something like this:
为了也支持旧的 IE 版本，你可以添加如下内容：
<!--[if lte IE 8]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
zoom: 1;
}
</style>
<![endif]-->
<style type="text/css">
.color-block {
background: rgb(255,0,0); /*Fallback for other old browsers*/
background: rgba(255,0,0, 0.5);
}
</style>
Note that "#7FFF0000" from the conditinal comment equals "rgba(255,0,0, 0.5)", because 7F(hex) = 50(dec). So the alpha in the cc ranges from 00 to FF whereas in rgba it goes from 0 to 1. And that you should use "background" instead of "background-color", otherwise the fallback won't work. See http://jsfiddle.net/uRgfu/8/
请注意，条件注释中的“#7FFF0000”等于“rgba(255,0,0, 0.5)”，因为 7F(hex) = 50(dec)。所以 cc 中的 alpha 范围从 00 到 FF，而在 rgba 中它从 0 到 1。而且你应该使用“背景”而不是“背景颜色”，否则回退将不起作用。见http://jsfiddle.net/uRgfu/8/
Source http : // css-tricks.com / rgba-browser-support / (sorry not enough reputation to post more than 2 links)
来源 http : // css-tricks.com / rgba-browser-support / （抱歉没有足够的声誉发布超过 2 个链接）
回答by Vilius Gaidelis
Change 0 to some digit:
将 0 更改为某个数字：
filter: alpha(opacity=10);
