如何正确使用线性梯度? [英] How to correctly use the linear-gradient?

问题描述

我在CSS3中非常陌生，并且在我的项目的CSS文件中具有以下样式:

  .headerDiv {背景图片:线性渐变(#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％的含义.

解决方案

梯度 linear-gradient(#04519b，#044687 60％，#033769); 可以解释如下:

• 渐变是从 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.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.

解决方案

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>

这篇关于如何正确使用线性梯度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！