关于css3中linear-gradient中的百分比

《Css secret》第二章《背景与边框》 第五节《条纹背景》

正文

在第二章《背景与边框》中第五节《条纹背景》中，谈到了css3的新属性值linear-gradient,但是这里并不是详细说明这个新属性的用法，这里主要是用它来完成背景条纹，来看看原文中的说明与演示。

假设我们有一条基本的垂直线性渐变，颜色从#fb3 过渡到#58a（参见图2-20）：
background: linear-gradient(#fb3, #58a);​

图2-20 我们的起点

抛除兼容性前缀，linear-gradient 最简单的声明就是如上代码，接受两个颜色值参数，默认就是垂直渐变的。再来看如下原文：

现在，让我们试着把这两个色标拉近一点（参见图2-21）：
background: linear-gradient(#fb3 20%, #58a 80%);

图2-21 渐变现在出现在总高的60% 区域，剩下的部分显示为实色；色标的位置用虚线标示出来了

现在可以看到，在颜色值后面跟多一个对应的百分比值，虚线框中的渐变过渡被压缩了。第一个颜色的实色占了总高度的20%，第二个颜色的实色也占了总高度的20%，而渐变的过度则占了总高度的60%。当看到这里的时候我很好奇也很疑惑，为什么代码中并没有设置一个60%的值而为什么结果会有一个相同的值，书中也没有多说。说到底就是对这个属性的不熟悉，我翻阅mdn上面的文档，找到了这么一句：

linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% and finishing red */

从注释中可以清楚地知道，百分比是指某个颜色值距离起点的开始位置 。默认的渐变方式为从上往下，所以当某个颜色值设置了百分比后，便会从距离顶端相关的距离（百分比计算）开始填充实色。而渐变色会在顶部与尾部的中间填充。我们可以自己来验证相关的例子：

• 第一个我没有设置任何的百分比

    background:linear-gradient(
        red,
        orange
    );

  得到的效果是这样的：

未设置百分比

• 由于这个看不出默认的百分比是多少，所以接下来设置了

    background:linear-gradient(
        red 0%,
        orange 100%
    );

  结果发现

设置了百分比

• 效果跟上图并没有区别，所以如果我们不设置百分比的话，默认是根据颜色的个数来给每个颜色值设置的，最后一个颜色的百分比值就是100%，而起始的值就是0%，中间如果再有多个颜色值，则根据100/（个数-1）平均下去。相同的我们可以设置多个值例如

    background:linear-gradient(
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );

    background:linear-gradient(
        red 0%,
        orange 16.67%,
        yellow 33.33%,
        green 50.00%,
        blue 66.67%,
        indigo 83.33%,
        violet 100%
    );

  上面这两个代码效果都是一致的

效果一致

说了这么多，只知道了默认值，还不知道到底百分比是怎么工作的呢。那现在就再来写例子

• 首先来定义一个颜色值全部都为0的

     background:linear-gradient(
        red 0%,
        orange 0%
    );

  得到如下效果

百分比全为0

• 还不能看出是什么原因导致的，接下来再设置一个0% 20%的

    background:linear-gradient(
        red 0%,
        orange 20%
    );

0% 20%

• 再设置一个0% 50%的

    background:linear-gradient(
        red 0%,
        orange 50%
    );

0% 50%

由此不难看出，红色部分是从顶端就开始着色的，而橙色部分是从设置的距离顶部的百分比位置开始着色，但把橙色设置为0%的时候，便会直接从顶部开始着色，就有了橙色完全遮盖住红色的效果，当橙色百分比值增加的时候，相应的就会产生一个距离，而这个距离的空间在一开始已经被红色着色了，所以才会有了后面的效果。

ps：如果设置第一个颜色的值呢？

• 我们来设置一下第一个颜色的百分比

    background:linear-gradient(
        red 30%,
        orange 50%
    );

  
  

  可以看到红色部分明显加深下沉，这是因为红色被设置了距离顶部30%的距离才开始着色。那为什么前30%也还是红色呢，我自己觉得这是因为在最底层已经铺满了红色（也就是第一个颜色值）的着色了

知道了百分比值的作用，再来看看什么情况下才会产生渐变的过度效果：我们已经知道，当默认不设置百分比的时候，是这样的

未设置百分比

将红色设置0% 橙色50%后是这样的

红色0% 橙色50%

• 我们再进行修改，将红色改为30% 橙色70%看看效果

    background:linear-gradient(
        red 30%,
        orange 70%
    );

  
  

  红色30% 橙色70%

所以上面的图中可以仔细看出，过度也是有个空间占比的，默认（红色0%，橙色100%）的渐变过渡占比为

默认占比

红色0% 橙色50%的渐变过渡占比为

红色0% 橙色50%占比

红色30% 橙色70%的渐变过渡占比为

红色30% 橙色70%占比

所得得出结论，渐变过渡区的占比为总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间。

• 我们可以通过设置两个占比各为50%的颜色，看看渐变过渡区是否还存在

    background:linear-gradient(
        red 50%,
        orange 50%
    );

  
  

  此时因为空间都被着色给占满了，所以渐变的过度区也几乎没有空间，所以看不到任何的过度效果

PS：如果后一个颜色的百分比设置为比前一个颜色的百分比小呢，又代表什么意思？
下面摘抄自原文

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

所以我们可以知道，如果前面有比当前的颜色值百分比大的，会自动将当前颜色值的百分比设置为前面颜色中的最大百分比值，下面的效果我们就可以知道了

    background:linear-gradient(
        red 50%,
        orange 40%
    );

其实就相当于

    background:linear-gradient(
        red 50%,
        orange 50%
    );

根据上面全部所说的，自己简简单单就能通过一个属性做出一个多重颜色线条的背景

     background:linear-gradient(
        red 0%,
        red 14.3%,
        orange 0,
        orange 28.6%,
        yellow 0,
        yellow 42.9%,
        green 0,
        green 57.2%,
        blue 0,
        blue 71.5%,
        indigo 0,
        indigo 85.8%,
        violet 0,
        violet 100%
    );

多重颜色线条

ps：解释一下，总共用了7种颜色。第一个颜色为red，此时整个背景已经由red覆盖，在这里为什么颜色都要设置两次，这是因为每个颜色需要一个起始着色点，然后还需要将两个颜色之间的渐变过渡区域覆盖为实色，消除过度效果。可以想象当没有了实色的覆盖，最终效果会是这样的

    background:linear-gradient(
        red 0%,
        orange 16.67%,
        yellow 33.33%,
        green 50%,
        blue 66.67%,
        indigo 83.33%,
        violet 100%
    );

最终效果

转载自：http://www.jianshu.com/p/bf862535dd30