我在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%的含义。
答案 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
。#04519b
变为#044687
。100%
)是#033769
。与第一种颜色类似,如果没有为最后一种颜色指定位置,则假定其为100%。#044687
变为#033769
。
div{
height: 100px;
width: 100%;
background: linear-gradient(#04519b, #044687 60%, #033769);
}

<div></div>
&#13;
答案 1 :(得分:0)
这是linear-gradient
background: linear-gradient(direction, color-stop1, color-stop2, ...);
<强>方向
left,right,toright,..
left top,bottom right,..
180deg,80deg,90deg..