背景图片的高度和宽度在IE11上不起作用

Question

那是我的客户网站-http : //rubowarkitekter.dk/我已经编写了代码，可以根据调整屏幕尺寸/ 100％高度和100％宽度来制作背景图像的高度和宽度。 但这不适用于IE11。

我的CSS代码-

.home {
background: url(http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg) center center no-repeat fixed;
background-size: cover;  
z-index: -500;  
-webkit-background-size: cover;  
-moz-background-size: cover;  
-o-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale');/* To make IE work */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale')"; /* To make IE work */  
}

任何想法我怎么能使背景图像在IE11上达到高度和宽度100％。

谢谢

IE11截图-

Answer 1

CSS-Tricks的Chris Coyier提出了3种很好的解决方案，它们效果很好，其中2种是纯CSS。

你可以在这里阅读

例子

示例1（固定位置-理想选择）

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

示例2（内嵌图片-最好的东西）

HTML

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

CSS

#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%;
}

示例3（使用过滤器-不建议使用）

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

  /* IE fallback support */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

Answer 2

这里的问题是该图像不是背景图像。 从您的代码-

<img src="http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg" class="home">

这是一个图像元素，而不是CSS中添加的背景图像 。

您应该做的是将背景图像添加到“ body”元素或div包装器中。

我认为有很多建议很重要，

1. 使用HTML 5文档类型，而不是XHTML过渡

2. 删除body元素上的oncontextmenu事件处理程序-它不会阻止某人保存您的图像，但是会惹恼您的用户。

3. 验证您的网站，主页上有33个错误-这意味着用户浏览器中的结果不一致。 您的网站无法在Google Chrome浏览器中正常运行。

4. 组织您的CSS，我看不到您引用的代码实际上已存在于任何已加载的样式表中（当前仅开发吗？）。

5. 无论在何处使用供应商前缀（-moz，-webkit等），这些前缀都应出现在标准属性（不带前缀）之前，以便浏览器支持该属性后，将使用该前缀代替供应商前缀。

6. 通过使用CSS技巧的清晰修正代码清除浮动信息。 例如，社交媒体小部件。

7. 请勿在布局中使用position：fixed或position：absolute-您无法控制用户所访问的视口/设备/窗口的大小，因此不能采用特定的宽度。