我有以下 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/
最佳答案
您的页面没有正常的流高度,因为所有 body
的子级都是 div
,并且所有这些 div
都是绝对定位,在正常流中不留下任何其他内容。您导入的重置将 body
上的边距清零。结果,html
和 body
的高度都为零。
我不太确定 Chrome 和 Safari 为何或如何呈现渐变,因为我实际上希望浏览器不会呈现渐变,因为渐变不会有任何高度,而这正是 Firefox 正在做的。事实上,我无法让我的 Chrome 像你的那样呈现渐变 - 这会不会是 Chrome/Mac 和 Chrome/Win 之间的又一个差异?
无论如何,解决方案是给这些元素一些高度,这样渐变就有一个区域可以被绘制。问题是,由于所有的 div
都是绝对定位的,因此没有简单的方法来确定页面的内容高度。如果您希望渐变向下拉伸(stretch)内容的高度,不幸的是您可能不得不重新考虑您的布局。
关于css - 为什么使用线性渐变渲染背景会有所不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25143899/