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

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

Mary-Kate Olsen
リリース: 2024-11-17 02:02:03
オリジナル
432 人が閲覧しました

How to Set Opacity of a Div Background without Affecting Contained Elements in IE8?

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

含まれる要素の外観を維持しながら div の背景の不透明度を設定するInternet Explorer 8 では難しい場合があります。一般的に使用される不透明度プロパティは、div とその内容の両方に影響します。

rgba 背景色

推奨される解決策は、rgba を使用することです。背景色。「a」チャネルは不透明度を表します。このアプローチは、ほとんどの最新のブラウザでうまく機能しますが、IE8 以前ではサポートされていません。

.myDiv {
  background: rgba(200, 54, 54, 0.5);
}
ログイン後にコピー

CSS3Pie Hack for IE

IE8 で不透明度のサポートを実現するには、次のようにします。古いブラウザの CSS3 機能を模倣するツールである CSS3Pie を使用できます。 -pie-background プロパティが導入されており、behavior 属性と組み合わせて使用​​する必要があります。

.myDiv {
  background: rgba(200, 54, 54, 0.5);
  -pie-background: rgba(200, 54, 54, 0.5);
  behavior: url(PIE.htc);
}
ログイン後にコピー

IE のフィルター スタイル

または、IE のフィルター スタイルを利用することもできます。 gradient キーワードを使用したフィルター スタイル。このアプローチは CSS3Pie によって内部的に使用されます。

.myDiv {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33CCFF', endColorstr='#000000', GradientType=1);
}
ログイン後にコピー

この手法にはより具体的な構文が必要ですが、rgba をサポートしていないブラウザーにフォールバック オプションが提供されます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート