问题
I am pretty new in CSS3 and I have the following style in a CSS file of my project:
.headerDiv {
background-image: linear-gradient(#04519b, #044687 60%, #033769);
............................
............................
............................
}
It is pretty clear to me what
linear-gradient(#04519b, #044687 60%, #033769);
should do (it creates a vertical gradient as a background of a div with the class name headerDiv
.
I have to change it the colors of the gradient, so I found on Google this documentation: http://www.w3schools.com/css/css3_gradients.asp
The problem is that I can't find the syntax used in my CSS file.
So related to my:
linear-gradient(#04519b, #044687 60%, #033769);
what exactly represent the:
1) First value (#04519b)
2) Second value (#044687 60%), what does 60% mean?
3) Third value (#033769)
I know that these are changing the gradient color but I don't know the exact ordered and what 60% means.
回答1:
The gradient linear-gradient(#04519b, #044687 60%, #033769);
can be interpreted as follows:
- The gradient is from top
to bottom
of thediv
. This is the default direction which is used if no angle (like45deg
) or no direction (liketo right
) is specified. - The first color (that is at
0%
) is#04519b
. If no color-stop position is specified for the first color then it is assumed to be 0% as per spec. - The
60%
is a color-stop position. That is at60%
of the height of the gradient image, the color should exactly be#044687
. - This implies that between 0% and 60%, the color gradually changes from
#04519b
to#044687
. - The final color (that is at
100%
) is#033769
. Similar to the first color, if no position is specified for the last color, it is assumed to be at 100%. - This implies that between 60% and 100%, the color gradually changes from
#044687
to#033769
.
div{
height: 100px;
width: 100%;
background: linear-gradient(#04519b, #044687 60%, #033769);
}
<div></div>
回答2:
This is syntax for linear-gradient
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction
left,right,toright,..
left top,bottom right,..
180deg,80deg,90deg..
来源:https://stackoverflow.com/questions/32183134/how-to-correctly-use-the-linear-gradient