css - 为什么使用线性渐变渲染背景会有所不同？

Question

我有以下 CSS 代码:

html {
    font-size: 62.5%;
    background-color: #04BFBF;
    background: linear-gradient(to bottom, rgba(4, 191, 191, 0), rgba(4, 191, 191, 1)), url(seagreen-cloud.png);
    background-size: 100% auto;
}

这适用于 Chrome (v36) 和 Safari (v6.1.4)(即渐变应用于图像并且两者都在后台呈现)但不适用于 Firefox (v31)。我什至尝试使用 moz 前缀。

这是一个 fiddle ，但它并没有真正说明问题，因为 jsfiddle 取消了 html 和 body 标签:http://jsfiddle.net/marvery/3z327/

Answer 1

您的页面没有正常的流高度，因为所有 body 的子级都是 div，并且所有这些 div 都是绝对定位，在正常流中不留下任何其他内容。您导入的重置将 body 上的边距清零。结果，html 和 body 的高度都为零。

我不太确定 Chrome 和 Safari 为何或如何呈现渐变，因为我实际上希望浏览器不会呈现渐变，因为渐变不会有任何高度，而这正是 Firefox 正在做的。事实上，我无法让我的 Chrome 像你的那样呈现渐变 - 这会不会是 Chrome/Mac 和 Chrome/Win 之间的又一个差异？

无论如何，解决方案是给这些元素一些高度，这样渐变就有一个区域可以被绘制。问题是，由于所有的 div 都是绝对定位的，因此没有简单的方法来确定页面的内容高度。如果您希望渐变向下拉伸(stretch)内容的高度，不幸的是您可能不得不重新考虑您的布局。