css - 背景位置从底部偏移:Chrome和Firefox中的行为相反

当渲染带有偏移量的渐变背景时，我在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元素上应用两个相反的渐变。

当我在Body标签中设置底部偏移量时，问题会上升：Firefox使用正值向上转换，而Chrome使用负值向上转换（或者使用正值向下转换）。因此，两个主要的浏览器具有相反的行为。

如何解决呢？

最佳答案

我找到了Chrome的解决方案！

添加就足够了

 background-repeat:no-repeat;

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