すべてのブラウザで次のcssルールを使用しますが、機能します
// it fits the background image to container
background-size: contain;
background-size: cover;
IE8でも機能させるためのCSSルールはありますか?それともJavaScriptを使用する必要がありますか?
javascriptの場合、私はjqueryを使用しています。
私の目標をアクティブにするための最良の方法は何ですか?
すべてのブラウザで次のcssルールを使用しますが、機能します
// it fits the background image to container
background-size: contain;
background-size: cover;
IE8でも機能させるためのCSSルールはありますか?それともJavaScriptを使用する必要がありますか?
javascriptの場合、私はjqueryを使用しています。
私の目標をアクティブにするための最良の方法は何ですか?
私も同じ問題を抱えていましたが、以下のリンクを通過することで私の問題は解決しました
jQueryプラグインまたはフィルター付きのこのjavascriptフォールバックがあります
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
他のクロスブラウザー メソッドについては、同じページを確認してください
あなたはこのようにすることができます:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
<div class="frame">
<div class="contents">
page contents
page contents
page contents
page contents
page contents
</div>
</div>
</body>
</html>
CSS:
html {
background:#000;
}
html, body {
padding:0;
margin:0;
overflow:hidden;
height:100%;
}
.bgimg {
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
.frame {
color:white;
width:100%;
height:100%;
overflow:auto;
}
.contents {
padding:10px;
}
デモサイト: http://jsbin.com/enevov/1/edit
width:100%; を変更することで、さまざまな効果を得ることができます。高さ:100%; .bgimg で、歪みが必要かどうかに応じて、さまざまな効果を実現します。たとえばwidth: 100%
、上部に触れるだけです...
これが役立つことを願っています -ck