Question

我使用了很多被遮盖的背景图片。

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

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>标记。

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

1 个答案: