background 線性漸變

xioqua 發(fā)布于2019-08-29 15:32 / 3227人閱讀

摘要：設置漸變?yōu)閺挠业阶?。用于指定漸變的起止顏色指定顏色。第一個值設置寬度，第二個值設置高度。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。

格式：

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

 = linear-gradient([ [  | to ] ,]? [, ]+) 
 = [left | right] || [top | bottom]
 =  [  |  ]?

取值：
下述值用來表示漸變的方向，可以使用角度或者關(guān)鍵字來設置：
：順時針方向角度
用角度值指定漸變的方向（或角度）。
to left：
設置漸變?yōu)閺挠业阶?。相當? 270deg
to right：
設置漸變從左到右。相當于: 90deg
to top：
設置漸變從下到上。相當于: 0deg
to bottom：
設置漸變從上到下。相當于: 180deg。這是默認值，等同于留空不寫。
用于指定漸變的起止顏色：
：
指定顏色。
：
用長度值指定起止色位置。不允許負值不是指顏色的長度
：
用百分比指定起止色位置。

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

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

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

length （20px 30px拉伸圖片）
設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。

percentage （100% 100% 拉伸圖片）
以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。

cover （不拉伸圖片）
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。

contain （不拉伸圖片）
把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域。

云服務器 GPU云服務器 Background _background background:url 和Background

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113383.html

相關(guān)文章

入坑線性漸變linear-gradient

摘要：線性漸變的表達式看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。結(jié)果為線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉(zhuǎn)的。線性漸變linear-gradient的表達式：linear-gradient( [ | ,]? [, ]+); 看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。先從幾個實際的表達式講起： background-image:li...

gekylin 2019-08-29 11:24 評論0 收藏0
入坑線性漸變linear-gradient

摘要：線性漸變的表達式看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。結(jié)果為線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉(zhuǎn)的。線性漸變linear-gradient的表達式：linear-gradient( [ | ,]? [, ]+); 看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。先從幾個實際的表達式講起： background-image:li...

Corwien 2019-08-01 15:49 評論0 收藏0
CSS3 線性漸變應用

摘要：分為線性漸變和徑向漸變。而我們今天主要是通過一個小例子來針對線性漸變來剖析其具體的用法。今天的例子就是用的線性漸變制作一個大致的針孔注射器。第一個參數(shù)表示線性漸變的方向，是從上到下是從左到右，如果定義成，那就是從左上角到右下角。 CSS3 Gradient 分為 linear-gradient（線性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是通過一個小例子來針...

Snailclimb 2019-08-30 13:05 評論0 收藏0
淺探css3漸變

摘要：基本用法想要知道線性漸變有什么用，當然要先學習它的屬性和用法。下面我們先一起學習一下線性漸變的屬性。函數(shù)的第一個參數(shù)是角度或者方向，第二個參數(shù)是截止顏色的值，要想產(chǎn)生漸變的效果，當然至少要兩個或者兩個以上的顏色值。 css3的漸變屬性已經(jīng)在各種網(wǎng)頁設計中被廣泛使用，在沒有css3的漸變屬性之前，要實現(xiàn)一些多種顏色切換的效果圖，你可能別無他法，只能用一個圖片來顯示，雖然你知道使用圖片需要...

lieeps 2019-08-29 17:17 評論0 收藏0
[譯]HTML&CSS Lesson7: 設置背景和漸變色

摘要：屬性值則依賴于我們需要創(chuàng)建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設計師和開發(fā)者們都是通過切圖來實現(xiàn)漸變背景。背景對網(wǎng)站的設計有重大的影響。它有利于建立網(wǎng)站的整體感覺，設置分組，分配優(yōu)先級，對網(wǎng)站的可用性也有相當大的影響。在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...

bang590 2019-08-29 16:54 評論0 收藏0
[譯]HTML&CSS Lesson7: 設置背景和漸變色

摘要：屬性值則依賴于我們需要創(chuàng)建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設計師和開發(fā)者們都是通過切圖來實現(xiàn)漸變背景。背景對網(wǎng)站的設計有重大的影響。它有利于建立網(wǎng)站的整體感覺，設置分組，分配優(yōu)先級，對網(wǎng)站的可用性也有相當大的影響。在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...

jk_v1 2019-08-02 11:40 評論0 收藏0