ホームページ > 記事 > ウェブフロントエンド > さまざまなバージョンでの CSS 透明不透明度および IE 透明度フィルターフィルターの使用
さまざまなバージョンでの CSS 透明不透明度および IE 透明度フィルターフィルターの使用
- 不言オリジナル
- 2018-06-28 11:38:551681ブラウズ
CSS3 の透明属性の不透明度は、誰でもどこでも使用する必要があります。 CSS3 をサポートしていないブラウザで透明度を処理し、ブラウザーの効果を一定に保つ方法について、この記事では主に CSS の透明度の不透明度の詳細な説明と、IE の各バージョンの透明度フィルターの最も正確な使用方法を紹介します。興味がある人はもっと学ぶことができます。
CSS3の透明属性opacity誰もがどこでも使ったことがあると思います。 CSS3をサポートしていないブラウザを透過的に処理し、一貫したブラウザ効果を維持する方法については、誰でも書けると思いますが、フィルタの具体的な文法的意味やバージョンごとの書き方の違いとなると、書けない人も多いと思います。グループ内の多くの専門家に正確に尋ねましたが、どれもあまり正確ではなく、インターネット上の意見はさらに多様です。今日は主にこの属性を確認し、実際のテストを行って、正しい記述方法、IE のさまざまなバージョンのサポートと記述の違いを説明します。
まず、Opacity 属性は要素の透明度を設定するために使用されます。値の範囲は 0 から 1 であり、負の値にすることはできません。不透明度の値 1 は完全に不透明で、値 0 は完全に透明で視覚的に見えません。 opacity 属性とのブラウザの互換性については、以下を読み続けてください:
プライベート属性 -moz-opacity は、Firefox 3.5 以降ではサポートされなくなりました。Mozilla 1.7 (Firefox 0.9) より前では、FF はこのプライベート属性を使用していました。 -moz-opacity と opacity 属性の両方を今思い返してみると、Firefox が 3.5 にアップグレードされた直後、ページの透明効果の一部が突然消え、今では CSS3 が圧倒的に時間がかかっていることを嘆いています。ハエ。
IE9 以降では CSS3 の不透明度のサポートが開始されただけであり、IE6 ～ IE8 ではフィルター属性を使用してそれを実装することに慣れています。 IE4 ～ IE9 はすべて、フィルター書き込みメソッド progid:DXImageTransform.Microsoft.Alpha(Opacity=xx) をサポートしています。IE8 では、特別な -ms-filter が導入されました。この書き込みメソッドは、古い書き込みメソッドに対する修正であり、さらに改良されたものであると考えられます。仕様に従って、この書き方の属性値には引用符が付いているだけで、効果は以前と同じです。ただし、この書き込み方法の寿命は短く、IE10 以降、filter と -ms-filter はサポートされなくなりました。
Safari 1.2 より前のバージョンは、khtml のブラウザ カーネルに基づいていました。バージョン 1.2 のリリース後、-khtml-opacity 書き込みメソッドはサポートされなくなり、-khtml-opacity は歴史になりました。
Konqueror は -khtml-opacity をサポートしたことがありませんが、バージョン 4.0 から不透明度をサポートしています。
IE に加えて、現在の主流ブラウザである Opera 9.0 以降、Safari 1.2 (WebKit 125) 以降、Chrome などはすべて不透明透明属性をサポートしています。
バージョン 4.0 以降、IE にはいくつかの組み込みマルチメディア フィルター効果が提供されています。具体的な使用方法は次のとおりです。
構文:filter : フィルター
パラメーター:
filter : 使用するフィルター効果。複数のフィルターはスペースで区切ります。
手順:
1. オブジェクトに適用されるフィルター効果を設定または取得します。
2. この属性を使用するには、オブジェクトに高さ、幅、位置の 3 つの属性のいずれかが必要です。
3. フィルター機構は拡張可能です。サードパーティのフィルターを開発して使用できます。
4. この属性は MAC プラットフォームでは使用できません。
5. 対応するスクリプト機能はフィルターです。
IE4.0 以降は、次の 14 個のフィルターをサポートしています:①、HTML 要素に透明で漸進的な効果を表示する Alpha、
②、HTML 要素に風でぼやけた効果を生成する Blur
③ 、Chroma 画像内の特定の色を透明にします
④、DropShadow HTML要素にドロップシャドウを付けます
⑤、FlipH HTML要素を左右反転します
⑥、FlipV HTML要素を上下に反転します
⑦、Glowコンポーネントの周囲にハローとブラー効果を生成します
⑧、グレー カラー写真を白黒にします
⑨、反転 写真のネガ効果を生成します
⑩、ライト HTML上にライトとシャドウを配置しますコンポーネント
⑪、マスク 別の HTML 要素を使用して別の要素に画像マスクを生成します
⑫、シャドウ より立体的な影を生成します
⑬、ウェーブ HTML 要素に水平または垂直の波の変形を生成させます
⑭。 0 から 100 まで、0 は完全に透明、100 は完全に不透明を意味します。
②、FinishOpacity これは、Opacity と一緒に使用される選択パラメータです。Opacity と FinishOpacity を同時に使用すると、透明で漸進的な効果を生み出すことができ、よりクールになります。 0 から 100 まで、0 は完全に透明、100 は完全に不透明を意味します。
③、スタイル OpacityとfinishOpacityを同時に設定して透明なグラデーションを生成する場合、主に赤を使用してプログレッシブ表示の形状を指定します。 0: 勾配なし、1: 直線勾配、2: 円形勾配、3: 長方形放射。
④、StartX 緩やかなスタート
⑤のX座標値、StartY 緩やかなスタート
⑥のY座標値、FinishX 緩やかな終了
⑦のX座標値、FinishY 緩やかなスタート
のX座標値徐々に終わります
以下は例ですフィルターと不透明度の互換性をテストするには:
HTMLコード
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <p class="transparent_class">测试透明度</p> </body> </html>
注: テストするときはDOCTYPEを忘れずに書いてください。そうしないと実際の効果から逸脱します。
対応する CSS コード:
.transparent_class {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width:300px;
height:300px;
line-height:300px;
text-align:center;
background:#000;
color:#fff;
/* older safari/Chrome browsers */
-webkit-opacity: 0.5;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0.5;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0.5;
/* IE9 + etc...modern browsers */
opacity: .5;
/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
使用中は、適応するブラウザ/バージョンに応じて、必要なコード行を上から選択できます。すべてのブラウザを完全にサポートしたい場合は、不透明度またはフィルターに関する少なくとも最初の 5 文が必要です。注意しなければならないのは、filter と -ms-filter を同時に使用する場合は、filter の前に -ms-filter を記述してください。元の説明は次のとおりです:
IE7 をエミュレートする IE8 モードでも不透明度を機能させたい場合、順序は次のようにする必要があります:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first filter: alpha(opacity=50); // second
この順序を使用しない場合、IE7 をエミュレートする IE8 は機能しません。 IE8 と IE7 ネイティブでは不透明度を適用しません。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
関連する推奨事項:
CSS で固定された位置属性の使用の概要
CSS スプライトテクノロジーを使用して角丸の効果を実現する
トランジションとアニメーションの使用の概要CSS3 のアニメーション プロパティ
🎜🎜
以上がさまざまなバージョンでの CSS 透明不透明度および IE 透明度フィルターフィルターの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。