關於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%
    );