如何正确使用线性渐变?

时间:2015-08-24 13:07:35

标签: html css css3 linear-gradients

我在CSS3中很新,我的项目的CSS文件中有以下样式:

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

我很清楚 linear-gradient(#04519b, #044687 60%, #033769); 应该这样做(它创建一个垂直渐变作为div的背景,类名为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%的含义。

2 个答案:

答案 0 :(得分:6)

渐变linear-gradient(#04519b, #044687 60%, #033769);可以解释如下:

  • 渐变位于to bottom的顶部div。如果没有指定角度(如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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是linear-gradient

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

<强>方向

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