css - 背景图像:封面，闪烁的图像

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 的 1920x1080 文件，很可能有些浏览器还没有准备好处理这个尺寸范围(Firefox 闪烁，Chrome 不)。 Background-size是一个相当新的属性，所以不要指望在这种极端情况下得到完美的支持。

无论如何，我看不到您的示例在现实生活中的严肃应用。使用缩略图代替高清图像。您还需要清理您的标记，这是胡说八道。

最后考虑<img> tag who 会在大多数时候更容易使用。