IE8_html/css_WEB-ITnose での rgba カラーと互換性のある半透明の背景

仕事で写真用の半透明マスクを作っていたところ、IE8では対応していないことが分かりました

調べてみると、IE8はrgbaカラーをサポートしていないことが分かり、互換性を持たせる方法を探しました。 . こんなに早く解決するとは思いませんでした。

まず rgba の意味について話しましょう:

r は赤、g は緑、b は青、a は透明度を表します。赤、緑、青が三原色であり、この3色からあらゆる色を作ることができます。たとえば、rgba(0,0,0,.5) は黒で、透明度は 0.5 です。最新のブラウザは rgba をサポートしていますが、IE8 などの古いブラウザは rgba をサポートしていません (つまり、透明度が削除され、色のみを表現できます)。

オンライン ソリューションは次のとおりです:

background: rgba(0,0,0,.5); /*rgba をサポートするブラウザ*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr= #7f000000); /*IE8 サポート*/

2 番目の文は、前の行の透明度が機能しない場合に実行することを意味します。この文の意味はもともとグラデーションを作るために使用されていましたが、ここではグラデーションは必要ありません。したがって、両方の色が同じ色に設定されます。

#7f000000 について説明します。最初の部分は # 記号の後の 7f です。 rgba 透明度 0.5 の IEfilter 値です。 0.1 ～ 0.9 の各数値は IEfilter 値に対応します。対応関係は次のとおりです。

2 番目の部分は 19 以降の 6 桁です。これは 16 進数のカラー値です。これは、rgb 関数の値と同じである必要があります。たとえば、rgb(0,0,0,) は #000 に対応し、両方とも黒です。

現時点では、rgba の使用は IE8 と互換性があります。練習实实实实は練習後の背景色でのみ使用できますが、前景色などは無力です