IE_html/css_WEB-ITnose配下の背景半透明処理(フィルター)

現在の Web サイトのホームページ、ナビゲーション バーなどは、デバッグ時に Chrome ブラウザを使用しています。以前、IE の互換性の問題を検討しましたが、完全に解決する予定です。 Web ページの完全なレイアウトが完了した後。 IE8に対応していれば良いだけなので大きな問題はないと思います。

しかし、デバッグ段階に入ると、IE は完全に「クラッシュ」しました。それはまさに反人類の代名詞ですが、問題はまだ解決する必要があります。

まず、通常の状況では、より高いバージョンのブラウザでは、ボックスの背景に半透明効果を使用します。

body {     background: url(../images/background.jpg) no-repeat;}.box {     background: rgba( 0, 0, 0, 0.5);}

IE9上記の IE ブラウザと他のほとんどのブラウザの上位バージョンは「rgba」をサポートしているため、期待どおりに半透明のオーバーレイが背景画像の上に表示されます。

以前のバージョンの IE で表示すると、半透明効果がなくなりました。 (大きな黒い部分があるはずですが、実際には背景色が完全に消えています。なぜなら、以前、『HTML&CSS Web サイトのデザインと構築』(jon duckett 著) の「rgba」属性を説明したときに述べたので、ブラウザが認識できない場合は「rgb(0, 0, 0)」として扱われるはずです。期待される効果はありません。ブラウザはこの要素を直接無視するため、CSS スタイルを記述するときは、「rgba」要素の前に rgb(0, 0, 0) を追加します。ブラウザが次の要素を認識できない場合は、前の効果が使用されます。)

そこで、IEのフィルターを使用して処理しました。

後で記事を確認して、フィルターを使用して透明度を処理すると効果が出ていないことがわかりました。不透明度) 効果を使用するには、ボックスの適切な高さを設定する必要があります。 変更は次のとおりです。

Filter: Alpha () などに関するテーブルがあります。説明できます。

🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 'p (不透明度) = 50);' フィルターのアルファ チャネル フィルターを通じて要素を半透明にしますが、要素は hasLayout 属性をトリガーする必要があります。 🎜 🎜 IE 以外のブラウザでは、この CSS3 ドラフトの「opacity:0.5;」属性を使用して要素を半透明にします。 🎜 🎜 したがって、「filter:alpha(opacity=50);」opacity:0.5; を同時に使用すると、すべてのブラウザで半透明効果を保証できます。 🎜 🎜 🎜 🎜 🎜 🎜 🎜 予想通り、期待通りの効果が得られました。 🎜 🎜 しかし、それだけではありません。前述したように、認識できないブラウザで背景を取得するために、以前は「rbg」要素が使用されていましたが、場合によっては予期しない結果が生じることがあります。また、スタイルがある程度のレベルに達すると、IE 用に別のスタイルを記述する必要が生じることが多く、使い勝手があまり良くありません。 🎜 🎜 解決策を探していると、「DXImageTransform.Microsoft.gradient フィルター」を使用して対処する方法も学びました。透明性の問題に対処する必要があるのがごく一部の場合、これはより簡潔になります (詳しく書いていますが、単なる個人的な意見です)。 🎜 🎜 🎜 🎜 コードは次のとおりです: 🎜 🎜 🎜 🎜 🎜 🎜 🎜

body {     background: url(../images/background.jpg) no-repeat;}.box {     background: rgb( 0, 0, 0);     background: rgba( 0, 0, 0, 0.5);     filter:alpha(opacity=50);     opacity:0.50;}

🎜 🎜 🎜 🎜 🎜 🎜 🎜 「FILTER:progid:DXImage Transform.Microsoft.Gradient フィルターの使用法」について" が使用されており、関連するクエリは次のとおりです。 🎜🎜「🎜」

構文:
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
属性:
enabled: オプション。ブール値。フィルターがアクティブかどうかを設定または取得します。 true | false
true: デフォルト値。フィルターが有効になりました。
false: フィルターは無効です。

startColorStr: オプション。弦。カラー グラデーションの開始色と透明度を設定または取得します。
その形式は #AARRGGBB です。 AA、RR、GG、BB は 16 進数の正の整数です。値の範囲は 00 ～ FF です。 RR は赤色の値を指定し、GG は緑色の値を指定し、BB は青色の値を指定します。#RRGGBB カラー単位を参照してください。 AAは透明度を指定します。 00は完全に透明です。 FFは完全に不透明です。値の範囲外の値はデフォルト値に戻ります。
値の範囲は #FF000000 ～ #FFFFFFFF です。デフォルト値は #FF0000FF です。不透明な青。
EndColorStr: オプション。弦。カラー グラデーションの終了色と透明度を設定または取得します。 startColorStr プロパティを参照してください。デフォルト値は #FF000000 です。不透明な黒色。
機能:
有効: 読み取りおよび書き込み可能。ブール値。 「enabled」属性を参照してください。
GradientType: 読み取りおよび書き込み可能。整数値 (整数)。カラーグラデーションの方向を設定または取得します。 1 | 0
1:デフォルト値。水平方向のグラデーション。
0: 縦方向のグラデーション。
StartColorStr: 読み取りおよび書き込み可能。弦。 startColorStr プロパティを参照してください。
StartColor: 読み取りおよび書き込み可能。整数値 (整数)。カラー グラデーションの開始色を設定または取得します。 値の範囲は 0 ～ 4294967295 です。 0は透明です。 4294967295は不透明な白です。
EndColorStr: 読み取りおよび書き込み可能。弦。カラー グラデーションの終了色と透明度を設定または取得します。 startColorStr プロパティを参照してください。デフォルト値は #FF000000 です。不透明な黒色。
EndColor: 読み取りおよび書き込み可能。整数値 (整数)。カラーグラデーションの終了色を設定または取得します。 値の範囲は 0 ～ 4294967295 です。 0は透明です。 4294967295は不透明な白です。スクリプトでこの機能を使用する場合は、16 進形式 0xAARRGGBB も使用できます。
説明:
オブジェクトの背景とコンテンツの間にカスタムカラーレイヤーを表示します。
この効果がトランジションを介して表示されると、グラデーション ブック カラー レイヤーの上のテキストがプログラムによって透明になるように初期化され、カラー グラデーションが実装されると、テキストの色がその定義された値で更新されます。

”

基本的な使用方法は次のとおりです。” 開始色 (startColorstr) と終了色 (endColorstr) を設定する必要があります。単色の透明度の場合、これら 2 つの値は同じです。値は 8 桁の 16 進値で、最初の 2 桁はアルファ チャネル値を表し、00 は完全な透明を表し、最後の 6 桁はこの色の RGB 値を表します。 "

" この時点で、IE での半透明処理はほぼ完了していますが、IE 以外のブラウザもほぼすべて「rgba」属性をサポートしているため、IE の処理が面倒なだけです。