线性渐变瞬间消失

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% 的高度（您需要使用 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));
}

线性渐变瞬间消失

Linear gradient disappears after an instant

html

css

linear-gradients

css-transitions