CSS渐变背景条纹而不是平滑渐变

Question

我正在努力实现following page中的以下CSS背景效果。

然而，我没有得到那么平滑的渐变，而是得到了如下图所示的图像。

我的CSS：

body{
     background:-webkit-radial-gradient(#205983, #0A2742); background:radial-gradient(#205983, #0A2742); overflow:hidden; 

}

我想达到同样的效果。我身上没有其他的CSS。

从Chrome检查器（对于body元素）

background: -webkit-radial-gradient(#205983, #0A2742);
background: radial-gradient(#205983, #0A2742);
overflow: hidden;

我已在同一浏览器上检查了这两个页面，但我没有使用任何CSS重置代码。我怎样才能达到相同的效果。感谢。

Answer 1

example page you provided在谷歌浏览器中工作正常（版本28.0.1500.95米）。

我已经查看了网站的来源。他们使用的CSS是：

#wrap {
  min-width: 600px;
  height: 100%;
  position: relative;
  background: -webkit-radial-gradient(#205983, #0A2742);
  background: radial-gradient(#205983, #0A2742);
  overflow: hidden;
}

您是否尝试在您的网站上使用所有相同的CSS规则？ 主要注意 height: 100%;规则。这可能会有所帮助。

此外，计算机上的 GPU及其设置可能会导致出现此问题。但大多数情况下，问题源自浏览器使用的渲染引擎。突然的颜色组合不协调，导致显示的效果。

尝试稍微不同的颜色。使用Google Chromes Inspector 中的颜色选择器（css​​规则颜色值旁边的小矩形）。

用于生成CSS渐变的推荐在线工具是：ColorZilla。它为您提供了包含所有常见-vendor-前缀的css （或sass css，如果需要），甚至还增加了IE支持。我有积极的经验。试一试。

祝你好运！