不清楚 CSS3 渐变中的百分比符号答案

【问题标题】：Unclear about percentage % signs in CSS3 gradients不清楚 CSS3 渐变中的百分比符号
【发布时间】：2014-07-27 05:14:24
【问题描述】：

我正在研究 CSS3 渐变 (Link)。我无法理解以下语法

  /* Firefox 3.6 to 15 */
  background: -moz-linear-gradient(red, yellow 10%, green 20%);

谁能告诉我百分号是做什么的？它们的范围是多少？第二个百分比值（绿色 20%）是否应该总是大于第一个百分比值（黄色 %）？为什么没有红色的百分比符号？

【问题讨论】：

标签： html css colors gradient

【解决方案1】：

这里的百分号是用来对应填充背景色。如果你有语法，

background: -moz-linear-gradient(red, yellow 10%, green 20%);

它显示它首先以红色开始，背景是红色的，如果你添加黄色 10% 现在整个背景将是红色的 1/10 意味着现在红色仅覆盖 10% 和其他 90%将是黄色，如果添加绿色 20%，则黄色和红色将变为 20%，其他 80% 将是绿色，这里 20% 将分为两部分，实际上定义为黄色的 10% 和红色自动设置为其他 10%。

【讨论】：

【解决方案2】：

百分比告诉我们它渐变到该颜色的点。如果将黄色更改为 50%，它将在 50% 点从红色渐变为黄色。如果你给红色一个百分比值，红色直到那个百分比值才会开始，开始是最终渐变颜色的纯色。如果第三个渐变颜色百分比小于第二个，则不会显示。如果总值小于 100%，它将重复该渐变模式，直到占 100%。

【讨论】：