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

相关阅读点

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

正文

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

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

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

如今，让咱们试着把这两个色标拉近一点（参见图2-21）：

background: linear-gradient(#fb3 20%, #58a 80%);

如今能够看到，在颜色值后面跟多一个对应的百分比值，虚线框中的渐变过渡被压缩了。第一个颜色的实色占了总高度的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%   20%的

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

• 再设置一个0%   50%的

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

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

ps：若是设置第一个颜色的值呢？

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

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

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

![未设置百分比](http://upload-images.jianshu....
)
将红色设置0% 橙色50%后是这样的

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

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

因此上面的图中能够仔细看出，过分也是有个空间占比的，默认（红色0%，橙色100%）的渐变过渡占比为

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

红色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%
    );