ホームページ >ウェブフロントエンド >CSSチュートリアル >バックグラウンドサイズの IE8 互換性に関するソリューションの例
canius (http://caniuse.com/#search=background-size) によると、以下の図に示すように、背景サイズの互換性は IE9 以降のブラウザーです。
コード例:
<!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 ブラウザ:
(2) 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='img/aaa.jpg', sizingMethod='scale');
} IE8 ブラウザー効果:
フィルター: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled、sizingMethod=sSize、src=sURL)
enabled: オプション。ブール値。フィルターがアクティブかどうかを設定または取得します。 true: デフォルト値。フィルターが有効になりました。 false: フィルターは無効になります。
サイズ調整方法: オプション。弦。フィルタリングされたオブジェクトの画像がオブジェクト コンテナの境界内にどのように表示されるかを設定または取得します。トリミング: オブジェクトのサイズに合わせて画像をトリミングします。画像: デフォルト値。画像の寸法に合わせてオブジェクトのサイズ境界を増減します。 スケール: オブジェクトのサイズ境界に合わせて画像をスケールします。
ソース: 必須。弦。絶対または相対 URL アドレスを使用して背景画像を指定します。このパラメータを省略した場合、フィルタは効果がありません。
以上がバックグラウンドサイズの IE8 互換性に関するソリューションの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。