Question

我在网站上使用封面时遇到问题。封面是一个由覆盖整个浏览器窗口的图像组成的页面，可以在所有浏览器中正确加载，但是当我向下滚动然后再向上时图像会失真（仅在使用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;

Answer 1

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

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

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

我会尝试除table-cell之外的其他一些显示模式。

我尝试将display: table与height: 100%和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>

Answer 2

试试这个：

.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;
}

并删除＆＃39; .site-wrapper-inner＆＃39;规则。

背景图象Firefox翻译

2 个答案: