ホームページ ウェブフロントエンド CSSチュートリアル 不透明透明フィルタ用の IE 互換ソリューション

不透明透明フィルタ用の IE 互換ソリューション

Mar 22, 2018 pm 02:47 PM
ie 透明性

今回は、不透明透明フィルターの 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 などはすべて不透明透明属性をサポートしています。

IE は、バージョン 4.0 以降、いくつかの組み込みの

multimedia

フィルター効果を提供しています。具体的な使用方法は次のとおりです。

構文:

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要素を使用して、別の要素上の画像のマスクを生成します

⑫、Shadow より立体的な影を生成します

⑬、Wave HTML 要素に水平または垂直の波の変形を生成します

⑭、XRay X 線を撮影するように HTML 要素の輪郭を生成します

Alpha の詳細な説明フィルタパラメータ

①、Opacity 不透明度、パーセンテージ。 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 サイトの他の関連記事に注目してください。

推奨読書:
透明を使用して三角形を作成する


CSS3ブラウザの互換性の問題


HTML5+CSS3の読み込み進行状況バーとダウンロード進行状況バーの実装

🎜🎜

以上が不透明透明フィルタ用の IE 互換ソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Internet Explorer で Edge が開く: MS Edge リダイレクトを停止する方法 Internet Explorer で Edge が開く: MS Edge リダイレクトを停止する方法 Apr 14, 2023 pm 06:13 PM

Internet Explorer が長い間人気がなくなってきたことは周知の事実ですが、Windows 11 の登場により現実が始まりました。 Edge は、将来的に IE を置き換えるのではなく、現在 Microsoft の最新オペレーティング システムのデフォルトのブラウザーとなっています。現時点では、引き続き Windows 11 で Internet Explorer を有効にすることができます。ただし、IE11 (最新バージョン) の正式な廃止日は 2022 年 6 月 15 日であり、時間は刻々と過ぎています。これを念頭に置くと、Internet Explorer が Edge を開くことがありますが、それが気に入らないことに気づいたかもしれません。では、なぜこのようなことが起こっているのでしょうか?存在する

win11でie11ブラウザが使えない場合はどうすればいいですか? (win11ではIEブラウザは使用できません) win11でie11ブラウザが使えない場合はどうすればいいですか? (win11ではIEブラウザは使用できません) Feb 10, 2024 am 10:30 AM

ますます多くのユーザーが win11 システムにアップグレードし始めています。各ユーザーの使用習慣が異なるため、多くのユーザーは依然として ie11 ブラウザーを使用しています。では、win11 システムで ie ブラウザーを使用できない場合はどうすればよいでしょうか? Windows11はIE11をまだサポートしていますか?解決策を見てみましょう。 win11でie11ブラウザが使えない問題の解決策 1. まず、スタートメニューを右クリックし、「コマンドプロンプト(管理者)」を選択して開きます。 2. 開いたら、「Netshwinsockreset」と直接入力し、Enter キーを押して確定します。 3. 確認後、「netshadvfirewallreset&rdqu」と入力します。

win10タスクバーの透明度を設定する方法を教えます win10タスクバーの透明度を設定する方法を教えます Jul 10, 2023 pm 12:37 PM

win10 システムには比較的新しい機能がたくさんあります。友人の中には、win10 システムをよりパーソナライズしたいと考えているため、タスク バーの透明度をよりクールに見えるように設定したいと考えている人もいます。では、Win10 タスクバーの透明度を設定するにはどうすればよいでしょうか?以下のエディタでは、Win10 タスクバーの透明度を設定する方法を説明します。具体的な方法は次のとおりです。 1. コンピュータの電源を入れ、マウスをタスクバーに移動してタスクバーを右クリックし、ウィンドウ内の「タスクバーの設定」を見つけてクリックします。 2. 「タスクバーの設定」ウィンドウをクリックした後、「色」オプションを見つけてクリックします。「色」設定インターフェイスでは、タスクバーの色を好みに設定できます。Windows の色を選択するか、色をカスタマイズできます。 . 選択 色を選択したら、下の「透明効果」を見つけます。

CSSプロパティを使用して透明度のグラデーション効果を実現する方法 CSSプロパティを使用して透明度のグラデーション効果を実現する方法 Nov 18, 2023 pm 05:28 PM

CSS プロパティを使用して透明度のグラデーション効果を実装する方法には、具体的なコード例が必要です。Web デザインでは、透明度のグラデーション効果は、ページに柔らかく美しい遷移効果を追加できます。 CSS プロパティの設定を通じて、さまざまな要素の透明度に対するトランジション効果を簡単に実現できます。今回は、一般的なメソッドと具体的なコード例をいくつか紹介します。不透明度属性を使用します。不透明度属性は要素の透明度を設定できます。値の範囲は 0 ~ 1 です。0 は完全に透明、1 は完全に不透明を意味します。私たちは通過できます

Win10でIEを開いた時のEdgeへの自動ジャンプを解除する方法_IEブラウザページの自動ジャンプの解決方法 Win10でIEを開いた時のEdgeへの自動ジャンプを解除する方法_IEブラウザページの自動ジャンプの解決方法 Mar 20, 2024 pm 09:21 PM

最近、多くの win10 ユーザーが、コンピューターのブラウザーを使用するときに、IE ブラウザーが常に自動的にエッジ ブラウザーにジャンプすることに気付きました。このサイトでは、win10でIEを開いたときに自動的にエッジにジャンプして閉じる方法をユーザーに丁寧に紹介しましょう。 1. Edge ブラウザにログインし、右上隅にある [...] をクリックして、ドロップダウン設定オプションを探します。 2. 設定を入力したら、左側の列の「デフォルトのブラウザ」をクリックします。 3. 最後に、互換性で、Web サイトが IE モードで再ロードされないようにチェックボックスをオンにし、IE ブラウザを再起動します。

IEのショートカットが削除できない問題の解決方法 IEのショートカットが削除できない問題の解決方法 Jan 29, 2024 pm 04:48 PM

削除できない IE ショートカットの解決策: 1. 権限の問題、2. ショートカットの破損、3. ソフトウェアの競合、4. レジストリの問題、5. 悪意のあるソフトウェア、6. システムの問題、7. IE の再インストール、8. サードパーティの使用ツール; 9. ショートカットのターゲット パスを確認する; 10. 他の要素を考慮する; 11. 専門家に相談する。詳細な紹介: 1. 権限の問題、ショートカットを右クリックし、[セキュリティ] タブで [プロパティ] を選択し、ショートカットを削除するための十分な権限があることを確認してください。ない場合は、管理者として実行するなどしてみてください。

時代の終わり: Internet Explorer 11 は廃止されました。知っておくべきことは次のとおりです。 時代の終わり: Internet Explorer 11 は廃止されました。知っておくべきことは次のとおりです。 Apr 20, 2023 pm 06:52 PM

2022 年 6 月 15 日は、Microsoft が Internet Explorer 11 (IE11) のサポートを終了し、レガシー ブラウザーの章を閉じる日です。同社はしばらくの間、このサポート終了日をユーザーに通知し、Microsoft Edge への移行を計画するよう呼び掛けてきました。 Microsoft は、Windows の最新のデフォルト Web ブラウザとして IE11 を Windows 8.1 にバンドルしています。 Chrome の(現在の)高さには決して達しませんでしたが、2014 年には IE8 に次いで 2 番目に使用されたデスクトップ ブラウザーでした。もちろん20個でも

起床画像の透明度はどこにありますか? 起床画像の透明度はどこにありますか? Mar 20, 2023 am 11:47 AM

ウェイクアップ画像の透明度は「特殊効果 -> 調整パラメータ」にあります。画像の透明度を設定する具体的な方法は次のとおりです: 1. ウェイクアップ画像アプリを開きます。 2. 「インポート」をクリックして「」を選択します。お気に入りの画像」を開きます; 3. ページの下部にある「特殊効果」をクリックし、「パラメータの調整」をクリックし、「透明度」をクリックして、チェックマークをスライドして透明度を設定します。

See all articles