背景图像：封面，闪烁的图像

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>标签，谁的大部分时间会更容易使用。