當使用'background-size：cover'改變高度時IE圖像的問題

Question

在IE 9+中，使用background-size: cover時除了使用jQuery擴展元素的高度時外，沒有問題。背景像其假想的那樣延伸，但它留下了一些來自先前高度的背景圖像僞影。

只有當存在滾動條時纔會發生。如果用戶花時間去做，重新調整窗口大小可以解決這個問題。

你可以看到這裏的問題： https://jsfiddle.net/g2afLhv5/4/

截圖在這裏： http://imgur.com/a/jhoxo

有沒有解決這個使用JS或CSS什麼辦法？

Answer 1

嘗試用<div class="body-wrapper">包裝內容並將背景圖像應用於此包裝。

$('.t1').click(function() { 
 
    $('.box').css('height','900px'); 
 
}); 
 
$('.t2').click(function() { 
 
    $('.box').css('height','1900px'); 
 
});

body { 
 
    margin:0; 
 
} 
 

 
.body-wrapper { 
 
    background:url('http://i.imgur.com/b7RXF5u.gif') center 0 no-repeat; 
 
    background-size: cover; 
 
    padding: 0 50px; 
 
} 
 

 
.box { 
 
    margin: 50px 0; 
 
    background: rgba(255,255,255,0.8); 
 
    min-height: 900px; 
 
    clear: both; 
 
    border: 2px solid red; 
 
} 
 
.tabs { 
 
    float: right; 
 
} 
 
.tabs div { 
 
    float: left; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="body-wrapper"> 
 
    <div class="tabs"> 
 
    <div class="t1">Tab1</div> 
 
    <div class="t2">Tab2</div> 
 
    </div> 
 
    <div class="box"></div> 
 
</div>

Answer 2

嗨只需添加固定在車體

background-attachment: fixed; 

這裏背景附件屬性工作小提琴

https://jsfiddle.net/okouobeu/