背景圖像：封面，閃爍的圖像

Question

我利用了許多覆蓋的背景圖像。

如果我在頁面內容區域內和固定左側面板內使用相同的圖像，它會非常沉重地閃爍。

轉載： http://jsfiddle.net/7aUnL/8/

HTML：

<div class="wrapper"> 
<div class="inner"> 
<div class="header cover"> 
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="image cover"></div> 
</div> 
</div> 
</div> 
<div class="flickermaker"> 
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="icon cover"></div> 
</div> 

CSS：

div.wrapper { 
    float: left; 
    width: 100%; 
} 

div.inner{ 
    margin-bottom: 120px; 
    margin-left: 252px; 
    margin-right: 12px; 
    position: relative; 
} 

div.header { 
    display: inline-block; 
    margin-bottom: 10px; 
    min-height: 140px; 
    overflow: hidden; 
    padding-bottom: 8px; 
    position: relative; 
    width: 100%; 
} 

div.image { 
    bottom: 0; 
    box-shadow: -3px 0 5px 3px rgb(0, 0, 0); 
    float: left; 
    height: 100%; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    text-align: center; 
    top: 0; 
    width: 140px; 
    z-index: 2; 
} 
.cover { 
    background-color: rgb(248, 248, 248); 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

div.flickermaker{ 
    border-right: 1px solid rgb(205, 205, 205); 
    bottom: 0; 
    height: auto; 
    left: 0; 
    margin-left: 0; 
    top: 0; 
    z-index: 999; 
    font-size: 0.85em; 
    overflow: hidden; 
    width: 240px; 
    position: fixed !important; 
} 
.icon { 
    border-left: 3px solid rgba(114, 184, 251, 0.4); 
    height: 100%; 
    left: -3px; 
    position: absolute; 
    transition: border-color 0.3s ease 0s; 
    width: 50px; 
    height:50px; 
} 

沒有小圖標的問題就會消失。有什麼建議麼？

編輯：以相同的圖像一切的較小版本是好的： http://jsfiddle.net/nxU3s/1/

Answer 1

的「閃爍」的形象是一個1.6MB 1920×1080的文件，最有可能的一些瀏覽器還沒有準備好應對這一系列尺寸（Firefox閃爍，Chrome不）。 Background-size是一個相當新的屬性，所以不要指望在這種極端情況下得到完美的支持。

無論如何，我看不到你的例子嚴重的現實生活中的應用。使用縮略圖代替高清圖像。你也需要清理你的標記，這是相當無稽之談。

最後考慮<img>標籤，誰的大部分時間會更容易使用。