摘要:第一個顏色的實色占了總高度的,第二個顏色的實色也占了總高度的,而漸變的過度則占了總高度的。默認的漸變方式為從上往下,所以當某個顏色值設置了百分比后,便會從距離頂端相關的距離百分比計算開始填充實色。而漸變色會在頂部與尾部的中間填充。
相關閱讀點
《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% );
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116637.html
摘要:漸變范圍顏色范圍整個的寬度是,是,可以發現它截止的地方正好是,但是的漸變終點是。漸變過渡區的占比為總的空間高度或寬度減去上下兩個著色塊空間占比剩下的空間。 因為我不喜歡背公式,希望自己能找到比較容易理解和推理的記憶方式吧,很早就感覺CSS3漸變的屬性組成不太好記憶,所以今天終于挖了這個坑,其實也沒什么很特別的,嘻嘻,如果有錯誤歡迎提出。 基本用法 我們一般都是在添加background...
摘要:另外一種實現思路是添加四個來分別實現上下左右的邊框效果,雖然可行,但是要添加四個額外元素,有點兒得不償失的感覺。背景 這幾天工作中遇到一個交互需求,要求實現一個效果,當鼠標移入一個元素的時候,元素出現一個動態的邊框,如圖: showImg(https://user-gold-cdn.xitu.io/2019/5/15/16aba8a2ccb58e4e);動態邊框 思路 看到這個效果,我首先想...
摘要:如果只指定其中一個值,另一個值會被設定為因此可以和混用。通過設定負的,背景圖像的一部分被拖拽到父元素之外,從而在父元素之內顯示要顯示的內容。隨著的普及,相信漸變將成為主流。可以顯示的顯示范圍。 作為一個有理想有包袱的頁面仔,正像鑫哥在這篇文章說說CSS學習中的瓶頸(強烈推薦)里說的 其實,廣大頁面屌絲們并不畏懼那些學習能力強的人,畏懼的是那些學習能力強,同時,尼瑪學習又拼命的人。頁面仔...
閱讀 3659·2021-10-11 10:58
閱讀 2249·2021-10-08 10:05
閱讀 2030·2021-09-27 13:34
閱讀 3569·2019-08-30 15:53
閱讀 2728·2019-08-30 14:02
閱讀 3559·2019-08-29 16:55
閱讀 622·2019-08-29 15:41
閱讀 1067·2019-08-29 15:23