线性渐变在瞬间消失[重复]

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

你需要给你的 body 一个 100% 的最小高度和 100% 的 html 元素的高度（你需要使用 min-height 否则如果你的内容长于视口高度，背景将不会显示在底部溢出）

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));
}