1

在所有浏览器中，我使用以下 css 规则，并且可以正常工作

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

是否有 css 规则使其也可以在 IE8 中运行，或者我应该使用 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

you can do it like this:

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

demo site: http://jsbin.com/enevov/1/edit

you can achieve different effects by changing width:100%; height:100%; on .bgimg, to accomplish different effects, depending on whether you want a distortion or not, for instance just width: 100% will make it touch across the top, etc...

hope this helps -ck

于 2012-10-18T16:15:05.573 回答
0

这适用于我在 IE8 的全窗口上拉伸图像

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

于 2013-10-24T07:16:15.797 回答