Internet Explorer の古いバージョンで「background-size」を機能させるにはどうすればよいですか?

IE における背景サイズの課題を克服する

背景サイズのような CSS プロパティは広く採用されているにもかかわらず、次のような古いブラウザでは互換性の問題が発生する可能性があります。インターネットエクスプローラー（IE）。この記事では、IE で背景サイズを効果的に機能させるためのソリューションについて説明します。

IE 背景サイズの互換性

もともと CSS3 で導入された背景サイズにより、開発者は背景サイズを拡張したり、 HTML要素内に背景画像を配置します。ただし、IE ではこのプロパティのサポートが制限されており、背景画像をフル サイズでレンダリングします。

解決策: AlphaImageLoader フィルター

この制限に対する 1 つの回避策は、IE の AlphaImageLoader を利用することです。フィルター。このフィルタは、IE 5.5 以降で利用可能で、sizingMethod パラメータを使用して背景画像を拡大縮小します。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

ただし、このフィルタは画像全体を均一に拡大縮小することに注意してください。これは、画像スプライトや複雑な背景レイアウトを含むシナリオには適していない可能性があります。

代替ソリューション

AlphaImageLoader フィルターに加えて、背景のスケーリングを実現する代替アプローチもあります。 IE の場合:

• CSSスプライト: 複数の画像を 1 つのスプライト シートに結合し、CSS の背景位置と幅/高さのプロパティを使用して配置します。
• インライン SVG: 完全な機能を提供するインライン SVG 画像を利用します。 width、height、background-size などの CSS プロパティのサポート。
• 条件付きスタイリング: 条件付きコメントまたは JavaScript チェックを使用して、特に IE を対象としたさまざまな背景 CSS ルールを適用します。

結論

background-size などの CSS プロパティは、 IE の äldre バージョンではシームレスに動作しませんが、これらのソリューションは、これらのバージョンでバックグラウンド スケーリングとカスタマイズを実装するための実行可能な方法を提供します。環境

以上がInternet Explorer の古いバージョンで「background-size」を機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。