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

Click to see it in action

你应该看到的是两个半透明的正方形。但是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>

请注意，conditinal注释中的“＃7FFF0000”等于“rgba（255,0,0,0.5）”，因为7F（十六进制）= 50（十进制）。因此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);

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

3 个答案: