如何正确使用线性渐变？

Question

我是 CSS3 的新手，我在项目的 CSS 文件中有以下样式：

.headerDiv {
    background-image: linear-gradient(#04519b, #044687 60%, #033769);
    ............................
    ............................
    ............................
}

我很清楚什么 linear-gradient(#04519b, #044687 60%, #033769); 应该做的（它创建一个垂直渐变作为 div 的背景，名称为 class headerDiv。

我必须改变它的渐变颜色，所以我在 Google 上找到了这个文档：http://www.w3schools.com/css/css3_gradients.asp

问题是我找不到我的 CSS 文件中使用的语法。

与我的相关：

linear-gradient(#04519b, #044687 60%, #033769);

具体代表什么：

1) 第一个值 (#04519b)

2）第二个值（#044687 60%），60%是什么意思？

3) 第三个值 (#033769)

我知道这些正在改变渐变颜色，但我不知道确切的顺序以及 60% 的含义。

Answer 1

梯度linear-gradient(#04519b, #044687 60%, #033769);可以解释如下：

渐变来自 div 的顶部 to bottom。如果没有指定角度（如 45deg）或方向（如 to right），则使用 default direction。
第一种颜色（即 0%）是 #04519b。如果没有为第一种颜色指定 color-stop position，则根据规范假定它为 0%。
60% 是 color-stop position。即在渐变图像高度60%处，颜色应该正好是#044687.
这意味着在 0% 和 60% 之间，颜色逐渐从 #04519b 变为 #044687。
最终颜色（即 100%）为 #033769。与第一种颜色类似，如果最后一种颜色没有指定位置，则假定为100%。
这意味着在 60% 和 100% 之间，颜色逐渐从 #044687 变为 #033769。

div{
  height: 100px;
  width: 100%;
  background: linear-gradient(#04519b, #044687 60%, #033769);
}

<div></div>

Answer 2

这是 linear-gradient

的语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

方向

left,right,toright,..
left top,bottom right,..
180deg,80deg,90deg..

如何正确使用线性渐变？

How to correctly use the linear-gradient?

html

css

linear-gradients