html - 如何正确使用线性渐变？

Question

我是 CSS3 的新手，我的元素的 CSS 文件中有以下样式:

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

我很清楚是什么 线性渐变(#04519b, #044687 60%, #033769); 应该做的(它创建一个垂直渐变作为类名称 headerDiv 的 div 的背景。

我必须改变它的渐变颜色，所以我在谷歌上找到了这个文档: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 的顶部到底部。这是default direction如果未指定 Angular (如 45deg)或未指定方向(如 to right)，则使用它。
• 第一种颜色(即 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>