2

我正在尝试实现以下 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 重置代码。我怎样才能达到相同的结果。谢谢。

4

1 回答 1

3

您提供的示例页面在 Google Chrome (v. 28.0.1500.95 m) 中运行良好。

我已经检查了该网站的来源。他们使用的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 支持。我对此有积极的经验。试试看。

祝你好运！

于 2013-08-10T16:19:33.687 回答