ホームページ >ウェブフロントエンド >CSSチュートリアル >IE 8で含まれる要素に影響を与えずにDivの背景の不透明度を設定する方法は?

IE 8で含まれる要素に影響を与えずにDivの背景の不透明度を設定する方法は?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-13 02:07:02250ブラウズ

How to Set Opacity of a Div's Background Without Affecting Contained Elements in IE 8?

IE 8 で含まれる要素に影響を与えずに div の背景の不透明度を設定する

不透明度スタイルは、親要素とその子要素の両方に影響します。特定のシナリオでは望ましくない場合があります。含まれる要素に影響を与えずに div の背景の不透明度を設定するには、別のアプローチの使用を検討してください。

rgba() 背景色の使用

rgba() 関数により、赤、緑、青 (RGB) 値とアルファ チャネル値を指定します。アルファ チャネルの値によって不透明度が決まります。例:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

ここで、最初の 3 つの数値は RGB カラー値を表し、0.5 はアルファ チャネルの不透明度 (50%) を表します。

IE 固有の解決策: CSS3Pie

ただし、このメソッドは IE 8 以下をサポートしていません。これに対処するには、CSS3Pie ポリフィルを使用できます。 CSS3Pie は、rgba 背景色を含むさまざまな最新の CSS3 機能をサポートします。使用するには:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background: rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

代替案: グラデーションを使用した IE のフィルター スタイル

IE で機能するもう 1 つの代替案は、gradient キーワードを指定したフィルター スタイルを使用することです。ただし、このアプローチは直感的ではなく、IE のフィルターと直接対話する必要があります。

補足

  • rgba() は IE 8 以前では機能しません。
  • CSS3Pie は、RGBA 背景だけでなく、追加の CSS3 機能を追加します。

以上がIE 8で含まれる要素に影響を与えずにDivの背景の不透明度を設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。