为什么线性渐变仅应用于页面的1％（CSS）？

Question

When I tried to apply the linear gradient to a page in html using html tag in css the result is many tight strips, each one has it's own gradient.

html

    {
    background-image:linear-gradient(to top, black, white);
    }

but when I specified the height to be 100% it was applied to the hole page:

html
{background-image:linear-gradient(to top, black, white);
height:100%;
}

and when I specified the height to be 1% the result was the same strips with same height.

I'm confused and I don't know the reason behind that and why by default it's applied to just 1% despite I use the html tag (the root tag)?

Answer 1

Don't use background-image but background only, and add background-attachment .

If You use background-image and set height:100% for html while scrolling, You'll lose gradients.

Try this (just background and without height ):

html
{
    background:linear-gradient(to top, black, white);
    background-attachment:fixed;
}

Answer 2

The html is not full height. It is probably something like eight pixels tall. So setting the background image to a linear gradient executes that gradient over eight pixels. The default behavior for background images is to repeat indefinitely. That is why the eight pixel gradient is repeated over and over.

If you add background-repeat: no-repeat you'll see just one small gradient, and if you set the height to 100% you'll see the gradient expand to fill the element.