更新：

Question

我正在尝试获取线性渐变以在页面的body元素上工作。这是CSS：

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

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

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

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

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

如果我删除渐变线，则整个背景将如我所愿地变为lightgray，而不是以前的那种“随机灰色”。

那么，一个人怎么做？

使渐变延伸到整个窗口（当内容没有到达底部时）或
使渐变的末端颜色“连续超过”末端以填充其余可见区域。

两者都会为我工作，但我很沮丧。

Answer 1

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

奇怪，但是如果您可以将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单位。

它基本上与视口的高度一起使用。因此，无论身体内部的内容量多少，我们都需要身体占据整个视口高度。

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

有关视口的更多信息，请关注this。

支持：关于视口单元支持跨浏览器。您可以关注this link。

希望这对您有所帮助。

Answer 2

结果证明您提供的代码几乎在那里。当您看到变化是什么时，您会大笑。

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

我刚刚在背景属性中添加了“不重复”。渐变从内容的顶部到底部逐渐消失，然后被单个的实心渐变代替。

以下是显示其使用情况的代码段：

"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);

function onWindowLoaded(evt) {
    doDraw();
}

function doDraw() {
    var can = byId('output');
    var ctx = can.getContext('2d');
    ctx.translate(0.5, 0.5);
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, can.width,can.height);
    ctx.strokeStyle = '#d9d9d9';
    
    ctx.beginPath();

    for (var y = 0; y < can.height; y += 16) {
        ctx.moveTo(0, y);
        ctx.lineTo(can.width, y);
    }
    
    for (var x = 0; x < can.width; x += 16) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, can.height);
    }

    ctx.stroke();
}

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

<canvas id='output' width='241' height='225' />

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

2 个答案:

更新：