Question

我想通过延伸到整个屏幕的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文件存在。当我禁用过滤器属性时，没有任何反应。我做错了什么提示？

提前致谢。

Answer 1

好的......经过一番艰苦的琐事之后，这就是我想出来的：

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

第二：
我通过将过滤器应用于html而不是body来实现此目的。

我已经读过IE解决方法不适用于html，但我注意到的是（在我清除了图像路径问题之后）有一个拉伸的bacground图像，但它是其他一切都在背后。

Answer 2

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

Answer 3

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

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

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

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

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

享受这个简单的解决方案。的：）

在IE 8及以下版本中拉伸背景图像

3 个答案: