ie6_html/css_WEB-ITnose の png-24 のいくつかの透過メソッド

ゲームの公式ウェブサイトは、ページの背景や装飾文字のデザインにおいて、美しくマッチしたゲームスタイルを追求するため、フロントエンドページの制作者にとっては、ページの制作に多くの時間とエネルギーが費やされます。 png-24 画像と互換性がないため、開発者から軽蔑されてきた ie6 と互換性があります。

ページの価値は市場によって決まるため、IE6 には互換性がなければなりません。

一般的な解決策をいくつか示します:

dd_belatedpng.js メソッド

js ファイルを導入する

次に、 ie6 ではクラスを使用して透明にする必要がある要素。

その特徴は、png-24 の透明度の問題を大幅に解決できることですが、いくつかの明らかな問題もあります。

1. js ファイルをインポートする必要があります。

2. png-24 画像上で CSS 要素のレイヤーを動的にラップし、元の location:absolute; 要素が消えたり、その他の予期しないバグが発生したりします。

解決策: png-24 画像に、position:relative; を使用して dom 要素の別のレイヤーを追加するか、絶対位置指定を使用せず、または他の方法を使用します。

ieフィルターメソッド

jsメソッドが失敗した後、このメソッドを使用して画像を透明にすることができます。

background:url(/images/game_box.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/game_box.png',sizingMethod='crop' );

もちろん、この方法の欠点は次のとおりです:

1. フィルターのパフォーマンスの問題は常に IE ブラウザーのボトルネックでした。

2.background-position は実装できません。

画像の置換方法

画像の背景をスクロールする必要がない場合は、高度なブラウザで png-24 画像を使用し、スクリーンショット ツールを使用して透明にする必要がある領域をキャプチャし、スクリーンショット画像を使用できます。直接。

この方法の利点は、互換性の問題がなく、画像サイズを確保しながら正常に表示できることです。欠点は、操作が複雑になり、スクリーンショットの色情報の一部も発生することです。失われるイメージ。

ブラウザの区別方法

もう一つの方法は、jsを使用してie6かどうかを判断し、異なる画像を追加することです。ブラウザに応じて異なる画像を使用してください。

この方法は、比較的成熟したユーザー市場の製品やインターフェースに使用されますが、ローエンドの IE6 ブラウザーのユーザーは考慮されていませんが、ブラウザーでの正常な表示も保証されていますが、画像の品質は若干劣ります。

上記の方法はro公式サイトに色濃く反映されています。