背景图像高度&宽度不适用于IE11

时间:2013-12-27 13:15:58

标签: html css internet-explorer internet-explorer-11

这是我的客户网站 - 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截图 - IE11 screenshot

2 个答案:

答案 0 :(得分:1)

CSS-Tricks的Chris Coyier提出了3个非常好的解决方案,其中2个是纯CSS。

You can read up on this here

实施例

示例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')";
}

答案 1 :(得分:1)

这里的问题是图像背景图片。从你的代码 -

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

这是一张图片元素,而不是CSS中添加的背景图片

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

有许多建议我认为重要 -

  1. 使用HTML 5 doctype而不是XHTML transitional

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

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

  4. 组织你的CSS,我看不出你引用的代码实际存在于任何已加载的样式表中(目前它只是开发人员吗?)。

  5. 无论您使用供应商前缀(-moz,-webkit等),这些都应该出现在之前标准属性(没有前缀),以便使用它而不是浏览器支持该属性后的供应商前缀。

  6. 使用CSS tricks clear-fix代码之类的内容清除您的花车。例如,社交媒体小工具。

  7. 使用position:fixed或position:absolute for layout - 您无法控制用户访问的视口/设备/窗口大小,因此无法假设特定宽度