在主体上设置的CSS3渐变背景不会拉伸，而是会重复吗？

一尘不染

css

好的，说里面的内容<body>总计高300像素。

如果我设置<body>使用-webkit-gradient或的背景-moz-linear-gradient

然后，我将窗口最大化（或使其高度大于300px），渐变将恰好是300px高（内容的高度），然后重复进行以填充窗口的其余部分。

我假设这不是错误，因为在webkit和gecko中都是相同的。

但是，是否有一种方法可以使渐变拉伸以填充窗口而不是重复？

阅读 309

2020-05-16

共1个答案

一尘不染

应用以下CSS：

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

编辑： 添加margin:0;到每个声明的正文声明。

编辑： 添加background-attachment: fixed;到每个声明的正文声明JoheGreen。

2020-05-16