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

Question

我正在尝试让线性渐变在我的页面的 body 元素上工作。这是 CSS:

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

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

更奇怪的是 'blank' 区域被设置为某个 'gray' 级别，我不知道它来自哪里，也不知道如何更改它。

为了解决后者，我尝试了这个，认为当渐变是 'done' 时，它会继续纯色，但这没有效果：

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

如果我删除渐变线，那么整个背景会像我预期的那样变为 lightgray，而不是之前的 'random gray'。

那么，如何做到以下任一：

使渐变扩展到整个window（当内容没有到达底部时）或
具有渐变的结束颜色'continue past'以填充其余可见区域的结束。

两者都适合我，但我很难过。

Answer 1

原来你提供的代码几乎就在那里。当你看到变化是什么时，你会笑的。

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

我刚刚将 "no-repeat" 添加到背景属性。渐变从内容的顶部逐渐消失到底部，然后替换为单一的实心内容。

以下是使用中的片段：

"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' />

Answer 2

你说的真奇怪，背景颜色确实占据了 window 的整个高度，而背景渐变则没有。

奇怪，但是有一个 way/hack 如果您可以指定一些 min-height 到 body。

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

Note: We have min-height here so it does not matter even if content exceeds window height or if there is no content, it works both ways.

更新：

1vh = 1% 视口高度。

vh是CSS单位。

它基本上适用于视口的高度。因此，因为我们需要 body 占据整个视口高度，而不管 body 内的内容量如何。

因此 100vh = 视口高度的 100%。

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

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

希望对您有所帮助。

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

How can I create a linear gradient that covers the entire visible vertical space (or transitions to solid?)

html

css

linear-gradients

更新：