1

在我的网站上使用封面时遇到问题。封面是由覆盖整个浏览器窗口的图像组成的页面，在所有浏览器中都正确加载，但是当我向下滚动然后再次向上滚动时，图像会失真（仅在使用 firefox 时）。最简单的解释方法就是显示网站：http ://arkad.tlth.se 。背景图像的 CSS 如下：

.site-wrapper-inner {
 display: table-cell;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

如果您想了解有关代码的更多信息，请检查元素。我尝试使用它来代替它，但现在滚动效果消失了。背景图像被其他内容滚动的效果。我试图将两者结合起来，使整个屏幕变白。有什么我想念的吗？

background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;
4

2 回答 2

1

我能够确认问题出现在 Firefox 中。背景图像在 Chrome 中正确显示。

如果您更改display: table-cell为.Firefox 中的问题就会消失display: block。

我怀疑是 Firefox 的表格单元高度计算引擎导致了这个问题。

我会尝试除表格单元之外的其他显示模式。

我尝试使用display: tablewith height: 100%and width: 100%，这接近您的需要。可能需要一些试验和错误。

我能够重现该问题，如下所示（表格单元格显示绘图问题）。

html, body {
  margin: 0;
}
div {
 background: url(http://placekitten.com/2000/2000) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 width: 100%;
 height: 400px;
}
div.bg-cell {
  border: 2px dashed red;
  display: table-cell;
  height: 400px;
  width: 1000px; /* the width is for demo only... */
}
div.bg-block {
  border: 2px dashed blue;
  display: table; /* block also works... */
}
<div class="bg-cell"></div>
<div class="bg-block"></div>

于 2014-09-25T15:19:53.773 回答
0

试试这个：

.site-wrapper {
 display: block;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

并删除 '.site-wrapper-inner' 规则。

于 2014-09-25T15:23:28.390 回答