css - css 不透明度が IE で機能しない

Question

私が知っているすべての不透明度オプションを文字通り投入しましたが、それでも不透明度は変わりません。

青いボックスが表示されるはずがありません

何をすべきか？

Answer 1

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

クリックして動作を確認

あなたが見るはずのものは、両方とも半透明の 2 つの正方形です。ただし、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>

7F(hex) = 50(dec) であるため、条件付きコメントの「#7FFF0000」は「rgba(255,0,0, 0.5)」と等しいことに注意してください。そのため、cc のアルファは 00 から FF の範囲ですが、rgba では 0 から 1 になります。また、「background-color」の代わりに「background」を使用する必要があります。そうしないと、フォールバックが機能しません。http://jsfiddle.net/uRgfu/8/を参照してください

ソース http : // css-tricks.com / rgba-browser-support / (2 つ以上のリンクを投稿するには評判が不十分で申し訳ありません)

Answer 3

0 を数字に変更します。

    filter: alpha(opacity=10);