时间戳

首页 > 解决方案 > 如何创建覆盖整个可见垂直空间的线性渐变（或过渡到实体？）

css - 如何创建覆盖整个可见垂直空间的线性渐变（或过渡到实体？）

问题描述

我正在尝试使用线性渐变来处理页面的正文元素。这是CSS：

body {
    background: linear-gradient(0deg, white, lightgray);
}

但是，这会按预期产生从白色到浅灰色的渐变，但它只出现在内容后面，而不是内容下方延伸到浏览器窗口底部的“空白”区域（当内容没有完全填满它时）当然。）

更奇怪的是，“空白”区域设置为一些“灰色”级别，我不知道它来自哪里，也不知道如何更改它。

为了解决后者，我尝试了这个，认为当渐变“完成”时，它会继续使用纯色，但这没有效果：

body {
    background: linear-gradient(0deg, white, lightgray);
    background-color: lightgray;
}

如果我删除渐变线，那么整个背景就会变成lightgray我所期望的那样，而不是之前的那种“随机灰色”。

那么，如何执行以下任一操作：

  1. 使渐变扩展到整个窗口（当内容没有到达底部时）或
  2. 使渐变的结束颜色“继续过去”结束以填充可见区域的其余部分。

两者都对我有用，但我很难过。

标签： csshtmllinear-gradients

解决方案

正如你所说，这真的很奇怪，背景颜色确实占据了窗口的整个高度，而背景渐变却没有。

奇怪，但如果你可以指定一些min-height到body.

body {
    margin: 0;
    background: linear-gradient(0deg, white, lightgray) no-repeat;
    background-color: lightgray;
    min-height: 100vh;
}

注意：我们在min-height这里有，所以即使内容超过窗口高度或没有内容也没关系，它可以双向工作。

更新：

1vh=1%视口高度。

vh是 CSS 单位。

它基本上适用于视口的高度。所以我们需要 body 占据整个视口高度，而不考虑 body 内的内容量。

所以100vh= 100% 的视口高度。

有关视口的更多信息，请遵循此。

支持：关于视口单元支持跨浏览器。您可以点击此链接。

希望这对您有所帮助。

推荐阅读