为什么我的CSS背景在页面上重复两次？

Question

下面的代码是创建所需的背景，但在页面上重复两次。这是为什么以及如何预防？我正在Google Chrome中对此进行测试。

＆＃13;

＆＃13;

body {
  border-top-left-radius: 200px;
  border: 20px solid black;
  background: radial-gradient(at top left, lightgreen, blue);
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

Oriol是对的，您必须将background-repeat属性添加到CSS中。

所以只需添加background-repeat: no-repeat;即可看到您的背景不重复。这也适用于背景图像。

祝你好运。

Answer 2

使用以下css

body {
   border-top-left-radius: 200px;
   border: 20px solid black;
   background: radial-gradient(at top left, lightgreen, blue);
   background-repeat: no-repeat;
}

Answer 3

您可能需要提及background-repeat和background-size属性。

<强>的CSS

body {
  border-top-left-radius: 200px;
  border: 20px solid black;
  background: radial-gradient(at top left, lightgreen, blue);
  background-repeat: no-repeat;
  background-size: cover;
}