如何使 CSS 渐变背景拉伸以适合整个浏览器窗口而不是重复？

Body 元素的渐变背景：重复还是拉伸？

在网页设计中，使用 CSS 渐变作为背景可以增强美感。然而，当对 body 元素应用渐变时，会出现一个常见问题 - 渐变停止拉伸，而是重复自身。

问题：

假设文档的正文内容的高度为 300 像素。使用 -webkit-gradient 或 -moz-linear-gradient 设置渐变背景会产生仅 300px 高的渐变，并不断重复以填充剩余的窗口空间。有没有办法让渐变拉伸以适合窗口而不是重复？

答案：

要实现拉伸以填充整个窗口的渐变，应用以下 CSS：

html {
    height: 100%;
}

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

• html 元素的高度设置为 100% 以确保它扩展到整个窗口高度。
• body 元素的高度也设置为 100%，使其填充 html 元素内的可用高度。
• 添加 margin: 0 以删除任何内容身体周围不需要的间距。
• 背景重复：无重复可防止渐变重复
• 背景附件：固定在窗口滚动时保持渐变到位。

通过实现这些 CSS 规则，body 元素上的渐变背景将拉伸以填充整个窗户高度，提供视觉上无缝和身临其境的效果。

以上是如何使 CSS 渐变背景拉伸以适合整个浏览器窗口而不是重复？的详细内容。更多信息请关注PHP中文网其他相关文章！