従来、CSS で使用される色は 16 進数形式か、rgb(171,205,239) などの RGB 形式でした。
CSS3 では、HSL (色相、彩度、光) や不透明度/アルファ チャネルの使用など、色を扱う新しい方法がいくつか提供されています。残念ながら、現在これらを完全にサポートしているのは、Firefox 3 以降、Chrome 1.0 以降、Safari 3 以降と、いくつかの派生ブラウザのみです。しかし、私たちは最善を尽くすことができ、IE は Internet Explorer 9 まで一部の CSS3 プロパティのサポートを開始しません。
不透明度
これは実際には古いプロパティですが、驚くべきことに、より複雑な方法ではありますが、現在のバージョンの IE でサポートされています。
不透明度によりCSSオブジェクト全体が透明になり、すべての子要素の透明度が適切に継承されます。公式の構文は次のとおりです。
不透明度: [10 進数 0 ～ 1];
したがって、opacity: 0.5; に設定すると、オブジェクトが 50% 透明になります。新しいブラウザーは積極的にサポートしていますが、古いブラウザーでは、Internet Explorer と同様に、依然としていくつかのカスタム コードが必要です。
現在、古い Firefox バージョンの場合は -moz- プレフィックスを使用する必要があり、古い Safari/Chrome バージョンの場合は -webkit- プレフィックスを使用する必要があります。 Webkit カーネルの代わりに KHTML カーネルをまだ使用している古いバージョンの Safari の場合は、-khtml- を使用する必要があります。したがって、すべてのブラウザをサポートしたい場合、コードは次のようになります。
不透明度: 0.5;
-moz-不透明度: 0.5;
-webkit-opacity: 0.5;
-khtml-不透明度: 0.5;
ああ、ちょっと待ってください！ IEはどうすればいいのでしょうか？まあ、IE はこれをまったくサポートしていませんが、独自のフィルターを使用します。従来の方法は短くて簡潔です。
フィルター:アルファ(不透明度=50);
IE の場合、不透明度属性のような小数ではなく、0 ～ 100 の整数を使用する必要があることに注意してください。残念なことに、Internet Explorer 8 では、これを処理する新しい方法が提供されています。これは長いものなので、他のものと同じように覚えようとしないでください。
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
もちろん、古い IE ブラウザをサポートしたい場合は、上記の短いブラウザを使用する必要があります。つまり、ほとんどのブラウザと互換性を持たせたい場合は、合計 6 つの CSS ステートメントが必要になります。
PS: 実際、Safari はバージョン 1.2 (2004) から opacity 属性をサポートしています。KHTML コアを備えた Safari は基本的にもう見つかりません。実際、Konqueror は -khtml-opacity 属性をサポートしたことがないため、使用しないでください。 （原文の整合性を考慮して翻訳したため、上記のコードは修正しておりません）。 Opera は 9.0 から CSS3 の不透明度をサポートしていますが、Firefox は 3.5 まで不透明度をネイティブにサポートしていませんでした。 IE8 の -ms- plus フィルターはまさに Microsoft の天才の仕事です。ただし、filter と -ms-filter を同時に使用する場合は、filter の前に -ms-filter を記述することに注意してください。 ——シェンフェイ