如何正确使用线性梯度?

渐变是从 div 的顶部到底部.这是默认方向，如果没有角度(例如 45deg )或未指定方向(如向右).第一个颜色(即 0％)是#04519b .如果没有为第一种颜色指定颜色停止位置则根据规范假定为0％. 60％是颜色-停止位置.那就是渐变图像高度的 60％，颜色应该恰好是#044687 .这意味着在0％到60％之间，颜色逐渐从#04519b 变为#044687 .最终颜色(即 100％)为#033769 .与第一种颜色类似，如果未为最后一种颜色指定位置，则假定该位置为100％.这意味着颜色在60％和100％之间逐渐从#044687 变为#033769 . div {高度:100px；宽度:100％;背景:线性渐变(#04519b，#044687 60％，#033769)；} < div></div> 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.aspThe 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. 解决方案 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> 这篇关于如何正确使用线性梯度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！