Question

我目前有这个

<div id="grad1"></div>

使用css

#grad1 {
  height: 300px;
  background: linear-gradient(0deg, grey, white);
}

http://jsfiddle.net/9g2zrqse/

我试图让它变得更白，然后有灰色

Answer 1

您可以使用％和该停靠点的颜色在现代CSS中添加停靠点（我还包含旧版本，例如使用非标准“颜色停止”的webkit-gradient）：

background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* W3C */

您还会注意到我使用了rgba颜色而不是“灰色”或“白色”。使用颜色的预设名称是一个坏主意。它含糊不清，可能在每个浏览器中都有所不同。

Answer 2

看看 HERE （在使用多个颜色停止部分）

您可以在代码中添加另一个grey

CSS控制渐变停止

2 个答案: