背景圖片的高度和寬度在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-您無法控制用戶所訪問的視口/設備/窗口的大小，因此不能采用特定的寬度。