2

我正在使用 css3 来获得一个漂亮的全屏背景图像。

body{ 
  background: url(<?php echo $background_image; ?>) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

当然 IE8 和更老的版本不玩球而且看起来很糟糕。有没有一种简单的方法让它在 IE8 上运行？

我查看了jQuery AnyStretch，它使用以下方法调用：

<script type="text/javascript">
  $.anystretch(<?php echo $background_image; ?>, {speed: 150});
</script>

但即使它有效，我也无法做到，所以它只能在 IE8 浏览器中加载。使用 anystretch，浏览器会加载图像两次（一次在 css 中，一次在由 anystretch 创建的 html 中）。

任何人有任何想法的简单方法来做到这一点？

4

5 回答 5

2

你有没有检查过这个网站CSS Tricks Perfect Full Page Background Image。它涵盖了在不支持 CSS3 属性（例如background-size. 它具有纯 CSS 方法和 jQuery 辅助方法。

仅 CSS 技术 #2 涵盖 IE8+ 回退

于 2013-03-05T18:57:01.620 回答
0

You can do this.

background:url("image.png")no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png",sizingMethod=scale);
-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png",sizingMethod=scale);
于 2013-03-05T18:51:08.637 回答
0

It depends on how hacky you wanna get. You could place the css in a media query, so it won't load in IE8 or older (because they don't support media queries). Then place conditional comments around the javascript to specifically target IE 8 or earlier (as shown by Alex W). This way you only let IE8 or older use the anyStretch functionality, and avoid loading the image twice for those browsers.

于 2013-03-05T18:52:12.117 回答
0

不，没有“简单”的方法。大多数只是为旧浏览器选择替代背景，例如带有 repeat-x 的渐变图像。

于 2013-03-05T18:41:06.667 回答
0

但即使它有效，我也无法做到，所以它只能在 IE8 浏览器中加载。

这只会在 IE 8 浏览器中加载：

<!--[if IE 8]>
<script type="text/javascript">
  $.anystretch(<?php echo $background_image; ?>, {speed: 150});
</script>
<![endif]-->

或者如果您希望它在 IE 8 及更低版本上加载：

<!--[if lt IE 9]>
<script type="text/javascript">
  $.anystretch(<?php echo $background_image; ?>, {speed: 150});
</script>
<![endif]-->

http://www.quirksmode.org/css/condcom.html

于 2013-03-05T18:43:23.627 回答