0

我想通过延伸到整个屏幕的 css 加载图像。的CSS：

body {

    background: url(images/reelgoodguide2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    overflow: auto;
    margin: 0px;
    padding: 0px;

}

在 Chrome 和 Firefox 以及 IE9 中完美运行。

如果浏览器是 IE8 或 IE7，则 html 中有一个条件来包含一个附加的 css 文件。这个CSS包含：

body{

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

但不是 alphaimageloader 将图像拉伸到整个屏幕，图像保持居中并且不会调整大小。

注意：当我打开开发人员工具时，我可以看到 css 文件在那里。当我禁用过滤器属性时，什么也没有发生。关于我做错了什么的任何提示？

提前致谢。

4

3 回答 3

5

好的......经过一番艰苦的摆弄，这就是我想出的：

第一：
 图像的过滤器路径是相对于 html 文档，而不是 css 文件。令人沮丧

第二：
  我通过将过滤器应用于html而不是body.

我读过 IE 解决方法不适用于，html但我注意到（在我清除图像路径问题后）有一个拉伸的免费图像，但它在其他所有内容之后。

于 2012-06-18T19:17:46.480 回答
0

我认为单独使用 CSS 是不可能的。搜索超大号。你会发现一些 JavaScript 库。

于 2012-06-18T19:20:30.007 回答
0

解决 IE8 背景问题的另一个有用的答案是：

下载backgroundsize.min.htc并将其放入您的项目中。

现在只需在您的 css 中添加这些行：

.class_name{
    //your other properties
    background-size: cover;
    -ms-behavior: url(backgroundsize.min.htc);
}

注意：url根据您的项目设置使用。

享受这个简单的解决方案。:)

于 2014-02-25T03:15:21.467 回答