为什么我的 CSS3 渐变不能拉伸以填充整个浏览器窗口？

CSS3 中的拉伸渐变

为

指定 CSS3 渐变背景时元素时，渐变不会拉伸以填充整个浏览器窗口。相反，它会重复自身，直到内容区域被填满。如果您希望渐变超出内容范围，此行为可能会令人沮丧。

解决方案

要使渐变拉伸以填充浏览器窗口，请应用以下 CSS :

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

这些样式完成以下任务：

• html {高度：100%； }：设置 的高度元素设置为100%，确保渐变背景可以延伸到可视区域之外。
• body { height: 100%;保证金：0； }：设置的高度将元素设置为 100% 并删除任何边距，以消除渐变和内容之间潜在的重叠。
• background-repeat: no-repeat;: 防止渐变在填充内容区域后重复自身。
• background-attachment:fixed;：确保渐变在滚动条移动时保持固定在原位，在整个过程中创建连续的渐变效果窗口。

以上是为什么我的 CSS3 渐变不能拉伸以填充整个浏览器窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！