Question

在渲染带偏移设置的渐变背景时，我在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;
}

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

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

如何解决这个问题？

Answer 1

我找到了Chrome的解决方案！

添加

就足够了

 background-repeat:no-repeat;

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

背景位置偏离底部：Chrome和Firefox中的相反行为

1 个答案: