バックグラウンドサイズの IE8 互換性に関するソリューションの例

高洛峰
リリース: 2017-03-21 14:58:14
オリジナル
3546 人が閲覧しました

canius (http://caniuse.com/#search=background-size) によると、以下の図に示すように、背景サイズの互換性は IE9 以降のブラウザーです。

解决background-size IE8兼容方案实例

コード例:

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>background-size 兼容性处理</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                border: 1px solid red;
                background: url(img/aaa.jpg) no-repeat center center;
                background-size: 100% 100%;
            }
        </style>
    </head>

    <body>
        <div>
        </div>
    </body>

</html>
ログイン後にコピー

効果:

(1) Chrome ブラウザ:

解决background-size IE8兼容方案实例

(2) IE8 ブラウザ:

解决background-size IE8兼容方案实例

互換性スキーム:

フィルター属性を使用する :

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                border: 1px solid red;
                background: url(img/aaa.jpg) no-repeat center center;
                background-size: 100% 100%;
                /*下一行为关键设置*/
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#39;img/aaa.jpg&#39;,  sizingMethod=&#39;scale&#39;);
            }
ログイン後にコピー

IE8 ブラウザー効果:

解决background-size IE8兼容方案实例

原則:

フィルター: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled、sizingMethod=sSize、src=sURL)

enabled: オプション。ブール値。フィルターがアクティブかどうかを設定または取得します。 true: デフォルト値。フィルターが有効になりました。 false: フィルターは無効になります。

サイズ調整方法: オプション。弦。フィルタリングされたオブジェクトの画像がオブジェクト コンテナの境界内にどのように表示されるかを設定または取得します。トリミング: オブジェクトのサイズに合わせて画像をトリミングします。画像: デフォルト値。画像の寸法に合わせてオブジェクトのサイズ境界を増減します。 スケール: オブジェクトのサイズ境界に合わせて画像をスケールします

ソース: 必須。弦。絶対または相対 URL アドレスを使用して背景画像を指定します。このパラメータを省略した場合、フィルタは効果がありません。

以上がバックグラウンドサイズの IE8 互換性に関するソリューションの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート