1

すべてのブラウザで次のcssルールを使用しますが、機能します

// it fits the background image to container
background-size: contain;
background-size: cover;

IE8でも機能させるためのCSSルールはありますか？それともJavaScriptを使用する必要がありますか？

javascriptの場合、私はjqueryを使用しています。
私の目標をアクティブにするための最良の方法は何ですか？

4

4 に答える 4

2

私も同じ問題を抱えていましたが、以下のリンクを通過することで私の問題は解決しました

http://css-tricks.com/perfect-full-page-background-image/

于 2012-10-18T16:02:57.257 に答える
1

jQueryプラグインまたはフィルター付きのこのjavascriptフォールバックがあります

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

他のクロスブラウザー メソッドについては、同じページを確認してください

于 2012-10-18T16:00:28.060 に答える
0

あなたはこのようにすることができます：

<!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

于 2012-10-18T16:15:05.573 に答える