How to correctly use the linear-gradient?

依然范特西╮ 提交于 2021-02-05 06:15:07

问题


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 the div. This is the default direction which is used if no angle (like 45deg) or no direction (like to 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 at 60% 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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!