0

在渲染带有偏移设置的渐变背景时，我在 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 向上转换为负值（或底部为正值）。所以两个主要的浏览器有相反的行为。

如何解决这个问题？

4

1 回答 1

0

我找到了 Chrome 的解决方案！

添加就足够了

 background-repeat:no-repeat;

到 BODY 标记 css 声明，如更新后的 JsFiddle 所示：

于 2013-07-22T09:24:02.167 回答