Question

我正在用 repl.it 训练一点 CSS，我决定放置一个渐变背景，但它给出了这个错误：

https://i.stack.imgur.com/kGFdM.png

我正在使用以下代码：

body {background: linear-gradient(to bottom, #17748b, #003a8b)}

这应该是一件容易的事情，但我根本无法解决这个问题。

Answer 1

为了让背景填满网页，你应该给html元素一个属性height: 100%，给背景一个属性no-repeat，就像这样：

html{
    height:100%
}

body {
    background: linear-gradient(to bottom, #17748b, #003a8b) no-repeat;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

这个错误是由于正文没有完全填满页面。

Answer 2

您需要使容器（html 元素）高 100%，并使用 no-repeat 停止背景渐变的重复图案。

html {
  min-height: 100%;
}
body {
   background: linear-gradient(180deg, #17748b 0%, #003a8b 100%) no-repeat; 
}

如何去除渐变背景的条纹

2 个答案: