background 線性漸變

yuan_yuanxu發表於2018-05-30

格式:

background: linear-gradient(direction, color-stop1, color-stop2, …);

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

取值:
下述值用來表示漸變的方向,可以使用角度或者關鍵字來設定:
<angle>順時針方向角度
用角度值指定漸變的方向(或角度)。
to left
設定漸變為從右到左。相當於: 270deg
to right
設定漸變從左到右。相當於: 90deg
to top
設定漸變從下到上。相當於: 0deg
to bottom
設定漸變從上到下。相當於: 180deg。這是預設值,等同於留空不寫。
<color-stop> 用於指定漸變的起止顏色:
<color>
指定顏色。
<length>
用長度值指定起止色位置。不允許負值不是指顏色的長度
<percentage>
用百分比指定起止色位置

兩個相鄰的color-stop之間的關係為:前者的起始位置與後者起始位置的差之間為兩個顏色的漸變過度距離,若後者位置與前者位置交叉則起始位置為前者結束位置,則無漸變過度,形成條紋樣式
如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小,則該色標的位置值會被設定為它前面所有色標位置值的最大值。

可利用background-size來設定背景影像的大小。linear-gradient生成的影像也同樣適用。

background-size: length|percentage|cover|contain;

length (20px 30px拉伸圖片)
設定背景影像的高度和寬度。第一個值設定寬度,第二個值設定高度。如果只設定一個值,則第二個值會被設定為 “auto”。

percentage (100% 100% 拉伸圖片)
以父元素的百分比來設定背景影像的寬度和高度。第一個值設定寬度,第二個值設定高度。如果只設定一個值,則第二個值會被設定為 “auto”。

cover (不拉伸圖片)
把背景影像擴充套件至足夠大,以使背景影像完全覆蓋背景區域。背景影像的某些部分也許無法顯示在背景定位區域中。

contain (不拉伸圖片)
把影像影像擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域

相關文章