背景位置从底部偏移：Chrome 和 Firefox 中的相反行为答案

【问题标题】：Background position offset from bottom: opposite behaviour in Chrome and Firefox背景位置从底部偏移：Chrome 和 Firefox 中的相反行为
【发布时间】：2013-07-08 11:25:05
【问题描述】：

在渲染带有偏移设置的渐变背景时，我在 Firefox 和 Chrome 中发现了相反的结果。

这是我的css代码：

html
{
   background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
   background-position: center top 30px;
}

body
{
   background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
   background-position: center bottom 100px;
}

这个想法是应用一种“滑动门”的背景，在 html 和 body 元素上应用 2 个相反的渐变。

当我在 Body 标签中设置底部偏移时问题出现了：Firefox 向上转换为正值，而 Chrome 向上转换为负值（或底部为正值）。所以两个主要的浏览器有相反的行为。

如何解决？

【问题讨论】：

我认为设置html 和body 的样式不是一个好主意。我会使用两个divs 并在它们上应用渐变。
这是一个不那么罕见的解决方案......在许多网站上都有记录...... ;-)
你能指出一个测试用例来显示你的问题吗？我在本地尝试过，对于两个浏览器来说，从底部偏移的正值意味着向上平移（这是规范要求的）。
看这个：link 特别注意背景。 Firefox 显示正确的行为。为了在 Chrome 中获得相同的值，我必须为底部偏移设置一个负值！

标签： css google-chrome firefox background-position

【解决方案1】：

我找到了 Chrome 的解决方案！

添加就够了

 background-repeat:no-repeat;

到 BODY 标签 css 声明，如 updated JsFiddle 所示：

【讨论】：