background 線性漸變

2021-09-13 19:20:22 字數 1581 閱讀 9927

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

= linear-gradient([ [ | to ] ,]? [, ]+)

= [left | right] || [top | bottom]

= [ | ]?

取值:

下述值用來表示漸變的方向,可以使用角度或者關鍵字來設定:

順時針方向角度

用角度值指定漸變的方向(或角度)。

to left

設定漸變為從右到左。相當於: 270deg

to right

設定漸變從左到右。相當於: 90deg

to top

設定漸變從下到上。相當於: 0deg

to bottom

設定漸變從上到下。相當於: 180deg。這是預設值,等同於留空不寫。

用於指定漸變的起止顏色:

指定顏色。

用長度值指定起止色位置。不允許負值不是指顏色的長度

用百分比指定起止色位置

兩個相鄰的color-stop之間的關係為:前者的起始位置與後者起始位置的差之間為兩個顏色的漸變過度距離,若後者位置與前者位置交叉則起始位置為前者結束位置,則無漸變過度,形成條紋樣式

如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小,則該色標的位置值會被設定為它前面所有色標位置值的最大值。

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

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

length(20px 30px拉伸)

設定背景影象的高度和寬度。第乙個值設定寬度,第二個值設定高度。如果只設定乙個值,則第二個值會被設定為 "auto"。

percentage(100% 100% 拉伸)

以父元素的百分比來設定背景影象的寬度和高度。第乙個值設定寬度,第二個值設定高度。如果只設定乙個值,則第二個值會被設定為 "auto"。

cover(不拉伸)

把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。背景影象的某些部分也許無法顯示在背景定位區域中。

contain(不拉伸)

把影象影象擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域

漸變背景(background)效果

chrom and safari瀏覽器 webkit核心的瀏覽器。使用css3漸變方法 css gradient webkit gradient type,start point,end point,stop.webkit gradient type,inner center,inner radiu...

線性漸變和徑向漸變

linear gradient direction,color 寫法 background webkit linear gradient direction,color 1.direction 方向,預設方向是自上而下 寫法有 1.background webkit linear gradient ...

線性漸變和徑向漸變

格式 background image linear gradient 方向,起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...