CSS不透明度在IE中不起作用

Question

我实际上已经抛出了我所知道的每个不透明度选项，但它仍然没有改变不透明度，

你不应该看到一个蓝框

该怎么办？

Answer 1

不透明度在IE 10、9、8中的伪对象上不起作用

试试这个代码：

HTML:

<div></div>

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;
}

点击查看实际效果

您应该看到的是两个均半透明的正方形。但是，IE忽略了伪项目的不透明度属性，并使其完全不透明。

Answer 2

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>

为了也支持旧的 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>

请注意，条件注释中的“#7FFF0000”等于“rgba(255,0,0, 0.5)”，因为 7F(hex) = 50(dec)。所以 cc 中的 alpha 范围从 00 到 FF，而在 rgba 中它从 0 到 1。而且你应该使用“背景”而不是“背景颜色”，否则回退将不起作用。见http://jsfiddle.net/uRgfu/8/

来源 http : // css-tricks.com / rgba-browser-support / （抱歉没有足够的声誉发布超过 2 个链接）