css - 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。而且你应该使用“background”而不是“background-color”，否则后备将不起作用。见http://jsfiddle.net/uRgfu/8/

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

Answer 3

将 0 更改为某个数字：

    filter: alpha(opacity=10);