线性渐变在瞬间消失

Question

我试图在CSS中实现linear-gradient()，但带有渐变的背景出现了一瞬间，然后变为空白。背景保持白色，因为我没有指定任何特定的背景颜色。当我刷新页面时，渐变背景再次出现一瞬间，然后消失，再次变为白色。

body {
max-height: 100%;
max-width: 100%;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

这是我用来实现线性梯度的语法。

我使用的浏览器是Brave，编辑器是VSCode。

Answer 1

你需要给你的身体100%的最小高度，html元素100%的高度(你需要使用最小高度，否则如果你的内容比视口高度长，背景不会显示在底部溢出(

html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
max-width: 100%;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}