IE、Firefox、Google_html/css_WEB-ITnose と互換性のある CSS フィルター

この概要では主に、この便利な CSS テクノロジーをプロジェクトに実装してすべてのブラウザーと互換性を持たせるための CSS 不透明度の詳細な紹介、コード例、および説明を提供します。

CSS の透明性について注意すべき点の 1 つは、CSS は長年使用されてきたにもかかわらず、標準のプロパティではなかったということです。これは非標準テクノロジーであり、CSS3 仕様の一部である必要があります。

1. 古い不透明度設定

次のコードは、Firefox と Safari の古いバージョンで必要な透明度設定です。 .5; }

-khtml-opacity 設定は、Safari 1.x との互換性を必要とするユーザーがいない限り、Webkit レンダリング エンジンの古いバージョン用です。

2 行目では、Mozilla レンダリング エンジンの以前のバージョンとの互換性を確保し、Netscape Navigator に戻るための専用属性 -moz-opacity を使用しています。 Firefox 0.9 では -moz-opacity 属性を使用する必要がなく、Firefox 3.5 (現在は Gecko エンジンを使用) ではこの属性はサポートされなくなりました。

2. Firefox、Safari、Chrome、Opera での CSS 透明度

次のコードは、IE を除くすべての現在のブラウザーにおける不透明度設定の最も単純で最新の CSS 構文です。 myElement { opacity: .7; }

上記の構文は、要素を 70% の不透明度 (または 30% 透明) に設定します。 opacity:1 を設定すると要素が不透明になり、opacity:0 を設定すると要素が完全に非表示になります。 「不透明度」が「不透明度」と同等であれば覚えやすいです。不透明度の値が小さいほど透明に近づきます。

不透明度属性は小数点第 2 位まで正確に指定できるため、可視性を検出するのは困難ですが、値「.01」と「.02」は実際には異なります。通常の状況では、「.3」や「.7」などの値で 1 桁の精度があれば十分です。

3. IE での CSS の透明度

IE は他のブラウザとは異なり、現在広く使用されている 3 つの異なるバージョンの IE があり、追加の CSS コントロールが必要になる場合があります。

#myElement { filter: alpha(opacity=40); }

上記の CSS は、専用のフィルター属性を使用して IE6-8 の透明度を設定します。 IE6 および IE7 の注意: 透明度の設定を有効にするには、要素が「レイアウト」である必要があります。要素は、幅や位置などの一部の CSS プロパティを使用してレイアウトできます。 Microsoft 独自の hasLayout プロパティの詳細と、それをトリガーする方法については、ここを参照してください。

IE8 で CSS 透明度を設定する別の方法には、次の構文があります (コメントに示されているバージョンに注意してください)。 /* 最初の行は IE6、IE7、IE8 で有効です。コードの最初の行は現在のすべての IE バージョンを対象とし、2 行目は IE8 のみを対象とします。

コードの 2 行の違いに注目してください。コードの 2 行目では、フィルター属性の前に -ms- プレフィックスがあり、属性値が引用符で囲まれています。これは構文で必須です。

正直に言うと、前の例で alpha(opacity=40) 構文を使用して IE のどのバージョンでもレイアウト要素に作用した後でも、「progid」「メソッド」を使用する必要があるかどうかはわかりません。 。

4. JavaScript を使用して CSS の透明度を設定および変更する

JavaScript で CSS の不透明度プロパティにアクセスするには、次の構文を使用できます。

document.getElementById("myElement").style.opacity = ". 4"; // すべての最新ブラウザの場合 document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // IE の場合

上記のコードはインライン ループなどを使用してインクリメントできます。動的関数 透明度の値を変更します。もちろん、最初に機能検出を通じてどのコード行を使用するかを決定する必要があります。

5. JQuery を使用して CSS の透明度を設定および変更する

jQuery を直接使用して CSS の透明度を設定する方が、コードはすべてのブラウザで同じであり、実装する必要がないため、より直感的で簡単です。 IE で要素が "haslayout" であるかどうかを心配してください:

$("#myElement").css({ opacity: .4 }); // すべてのブラウザで有効です

次の jQuery コードを使用して要素を透明にアニメーション化することもできます:

$("#myElement").animate({ opacity: .4 }, 1000, function() { // アニメーション完了、すべてのブラウザー有効});

アニメーションの開始時の要素の透明度が何であっても、「.4」の透明度にフェードします。アニメーションの速度は値「1000」で設定され、アニメーション時間はミリ秒単位です。コードの最後のプロパティは、アニメーションの完了後に実行されるオプションのコールバック関数です。

CSSで要素の透明度を「.4」に設定している場合、アニメーションを実行すると違いが分からないので、アニメーションの開始時と終了時の透明度は異なるはずです。

6. RGBA による透明性

別の CSS3 テクノロジーは、一部の新しいブラウザ (Firefox 3 以降、Opera 10.1 以降、Chrome 2 以降、Safari 3.1 以降) のみをサポートし、RGBA モードのアルファ チャネルを通じて使用できます。設定。構文は次のとおりです:

#rgba {background: rgba(98, 135, 167, .4); }

上記の定義では、背景の色をRGB（最初の3つの数字）で設定します。そして最後の設定は、特定の色の透明度を強制するアルファ設定です。このアルファ設定は不透明度プロパティと同じで、小数点以下 2 桁までの精度で 0 から 1 までの任意の数値に設定できます。数値が大きいほど、色は完全な不透明に近づきます。

7. HSLA による透明度

前の定義と同様に、CSS3 では色相 (色相)、彩度 (彩度)、明度を表す HSLA を使用して色とアルファ値を個別に設定することもできます。 (明るさ)、およびアルファ。以下は HSLA 透明度の例です:

#hsla {background: hsla(207, 38%, 47%, .4); }

HSLA カラーの詳細については、W3.org のこの記事を参照してください。 。 RGBA 透明度と同様に、最後の数字は透明度の設定を示し、RGBA と同じ役割を果たします。 RGBA および HSLA 透明度の重要な利点は、これらの透明度設定が子要素に影響を及ぼさないことですが、不透明度属性を介して影響することに注意してください。 RGBA および HSLA アルファ設定は、背景色の透明度にのみ影響し、それ以上には影響しません。