如何在CSS中使用线性渐变来实现双色体

Question

我一直在尝试将CS​​S中的内容用于我的网页：

但我唯一得到的是在所有页面上重复渐变：

这是我正在使用的代码：

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，其仅仅意味着视口高度，该高度是用户的网页的可见区域的高度。这样，无论设备如何，它都会覆盖整个屏幕高度。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这样的事情：

body {
	background: linear-gradient(to bottom,rgba(153,156,219,1) 0%,rgba(246,189,189,1) 60%);
    height:100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Answer 3

所以你有：

body{
  background: linear-gradient(to bottom, #F4F4F4 50%, #FFE0DA 50%);
  background-repeat: no-repeat;
  height: 200px;
}

工作原理：

1. to bottom指定渐变从上到下流动。

2. 您应该以百分比形式指定color-stop - 此处#F4F4F4停止在50％，然后在50％#FFE0DA开始。所以你得到一个没有任何渐变效果的双色div 。

要获得渐变效果，只需更改color-stop s：

即可

body{
  background: linear-gradient(to bottom, #F4F4F4 10%, #FFE0DA 50%);
  background-repeat: no-repeat;
  height: 200px;
}

谢谢！