Question

我在css中使用了这个属性，但它在IE8中不起作用

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

body {
    background-image:url(../../images/bg.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    }

我在stackoverflow上获得了很多解决方案，但没有一个能够工作。

我该如何解决这个问题？

Answer 1

如果这有助于任何人，我制作了Sass Mixin：

@mixin background-cover($cover-image){
  background: url($cover-image) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$cover-image}', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$cover-image}', sizingMethod='scale');
}

使用

进行调用

@include background-cover('/images/foo.png');

Answer 2

我知道这已经很晚了，但这个答案可能有助于其他人：

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

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

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

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

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

Answer 3

我认为通用标签应该遵循特定于浏览器的标签：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;

还有：

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

希望这有效。

Answer 4

试试这个

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

ie8中的全尺寸背景图像

4 个答案: