径向渐变在 Firefox 中无法正确显示

Question

我在 Firefox 的网站上显示径向渐变时遇到问题。渐变似乎在 Edge 和 Chrome 但在 Firefox 中效果不佳。

在 chrome 和边缘我得到这个：

这是我在 Firefox 中看到的：

body{
  background-color: blue;
  background: -moz-radial-gradient(center, ellipse cover, #0047ea 0%, #151515 100%);
  background: radial-gradient(#0047ea,#151515 );
  z-index: 0;
}

Answer 1

您需要在 body 上设置高度。设置为100vh将使渐变覆盖屏幕。

body{
  background-color: blue;
  background: -moz-radial-gradient(center, ellipse cover, #0047ea 0%, #151515 100%);
  background: radial-gradient(#0047ea, #151515);
  z-index: 0;
  
  height: 100vh;
}