html - 如何制作线性渐变来实现 CSS 中的双色主体

Question

我一直在尝试用 CSS 将其添加到我的网页中:

但我唯一得到的是整个页面的重复渐变:

这是我正在使用的代码:

body {
  background: @body-color;
  background: -webkit-linear-gradient(#999cdb, #f6bdbd);
  background: -moz-linear-gradient(#999cdb, #f6bdbd);
  background: -o-linear-gradient(#999cdb, #f6bdbd);
  background: linear-gradient(#999cdb, #f6bdbd);
}

这可能是一件简单的事情，但我不知道我错过了什么。

Answer 1

您需要指定一个高度。使用 vh 简单地表示视口(viewport)高度，即网页用户可见区域的高度。这样，无论设备如何，它都会覆盖屏幕的整个高度。

background-attachment 属性设置背景是固定的还是与页面的其余部分一起滚动。

body {
  background: @body-color;

background: -webkit-linear-gradient(#999cdb, #f6bdbd);
  background: -moz-linear-gradient(#999cdb, #f6bdbd);
  background: -o-linear-gradient(#999cdb, #f6bdbd);
  background: linear-gradient(#999cdb, #f6bdbd);
  height: 100vh;
  background-attachment: fixed;
}