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

【问题标题】：Background-image: cover, flickering images背景图像：封面，闪烁的图像
【发布时间】：2014-02-28 21:03:39
【问题描述】：

我使用了许多覆盖的背景图像。

如果我在页面内容区域和固定的左侧面板内使用相同的图像，它会非常严重地闪烁。

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/

【问题讨论】：

我没有看到任何闪烁……
Ubuntu 上的 Firefox 26。它为我闪烁。

标签： css background-image cover

【解决方案1】：

“闪烁”图像是 1.6MB 1920x1080 文件，很可能某些浏览器还没有准备好处理这个尺寸范围（Firefox 闪烁，Chrome 没有）。 Background-size 是一个相当新的属性，所以不要指望在这种极端情况下得到完美的支持。

无论如何，我看不到您的示例在现实生活中的严肃应用。使用缩略图而不是高清图像。您还需要清理您的标记，这是非常无稽之谈。

最后考虑一下<img> 标签，它在大多数情况下会更容易使用。

【讨论】：