資訊專(zhuān)欄INFORMATION COLUMN
摘要：設(shè)置漸變?yōu)閺挠业阶?。用于指定漸變的起止顏色指定顏色。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。
格式：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
= linear-gradient([ [ | to ] ,]? [, ]+) = [left | right] || [top | bottom] = [ | ]?
取值：
下述值用來(lái)表示漸變的方向，可以使用角度或者關(guān)鍵字來(lái)設(shè)置：
用角度值指定漸變的方向（或角度）。
to left：
設(shè)置漸變?yōu)閺挠业阶?。相?dāng)于: 270deg
to right：
設(shè)置漸變從左到右。相當(dāng)于: 90deg
to top：
設(shè)置漸變從下到上。相當(dāng)于: 0deg
to bottom：
設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫(xiě)。
指定顏色。
用長(zhǎng)度值指定起止色位置。不允許負(fù)值不是指顏色的長(zhǎng)度
用百分比指定起止色位置。
兩個(gè)相鄰的color-stop之間的關(guān)系為：前者的起始位置與后者起始位置的差之間為兩個(gè)顏色的漸變過(guò)度距離，若后者位置與前者位置交叉則起始位置為前者結(jié)束位置，則無(wú)漸變過(guò)度，形成條紋樣式。
如果某個(gè)色標(biāo)的位置值比整個(gè)列表中在它之前的色標(biāo)的位置值都要小，則該色標(biāo)的位置值會(huì)被設(shè)置為它前面所有色標(biāo)位置值的最大值。
可利用background-size來(lái)設(shè)置背景圖像的大小。linear-gradient生成的圖像也同樣適用。
background-size: length|percentage|cover|contain;
length （20px 30px拉伸圖片）
設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。
percentage （100% 100% 拉伸圖片）
以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。
cover （不拉伸圖片）
把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。
contain （不拉伸圖片）
把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113383.html
摘要：線(xiàn)性漸變的表達(dá)式看到線(xiàn)性漸變的表達(dá)式，又要開(kāi)始用腦了，分拆開(kāi)來(lái)其實(shí)很好理解。結(jié)果為線(xiàn)性漸變中的角度默認(rèn)是從下到上的垂直方向開(kāi)始順時(shí)針進(jìn)行旋轉(zhuǎn)的。 線(xiàn)性漸變linear-gradient的表達(dá)式：linear-gradient( [ | ,]? [, ]+); 看到線(xiàn)性漸變的表達(dá)式，又要開(kāi)始用腦了，分拆開(kāi)來(lái)其實(shí)很好理解。先從幾個(gè)實(shí)際的表達(dá)式講起： background-image:li...
摘要：線(xiàn)性漸變的表達(dá)式看到線(xiàn)性漸變的表達(dá)式，又要開(kāi)始用腦了，分拆開(kāi)來(lái)其實(shí)很好理解。結(jié)果為線(xiàn)性漸變中的角度默認(rèn)是從下到上的垂直方向開(kāi)始順時(shí)針進(jìn)行旋轉(zhuǎn)的。 線(xiàn)性漸變linear-gradient的表達(dá)式：linear-gradient( [ | ,]? [, ]+); 看到線(xiàn)性漸變的表達(dá)式，又要開(kāi)始用腦了，分拆開(kāi)來(lái)其實(shí)很好理解。先從幾個(gè)實(shí)際的表達(dá)式講起： background-image:li...
摘要：分為線(xiàn)性漸變和徑向漸變。而我們今天主要是通過(guò)一個(gè)小例子來(lái)針對(duì)線(xiàn)性漸變來(lái)剖析其具體的用法。今天的例子就是用的線(xiàn)性漸變制作一個(gè)大致的針孔注射器。第一個(gè)參數(shù)表示線(xiàn)性漸變的方向，是從上到下是從左到右，如果定義成，那就是從左上角到右下角。 CSS3 Gradient 分為 linear-gradient（線(xiàn)性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是通過(guò)一個(gè)小例子來(lái)針...
摘要：基本用法想要知道線(xiàn)性漸變有什么用，當(dāng)然要先學(xué)習(xí)它的屬性和用法。下面我們先一起學(xué)習(xí)一下線(xiàn)性漸變的屬性。函數(shù)的第一個(gè)參數(shù)是角度或者方向，第二個(gè)參數(shù)是截止顏色的值，要想產(chǎn)生漸變的效果，當(dāng)然至少要兩個(gè)或者兩個(gè)以上的顏色值。 css3的漸變屬性已經(jīng)在各種網(wǎng)頁(yè)設(shè)計(jì)中被廣泛使用，在沒(méi)有css3的漸變屬性之前，要實(shí)現(xiàn)一些多種顏色切換的效果圖，你可能別無(wú)他法，只能用一個(gè)圖片來(lái)顯示，雖然你知道使用圖片需要...
摘要：屬性值則依賴(lài)于我們需要?jiǎng)?chuàng)建什么樣的漸變背景，例如線(xiàn)性漸變或放射性漸變。我們會(huì)在線(xiàn)性漸變中介紹不同種類(lèi)的供應(yīng)商前綴，但為了簡(jiǎn)便起見(jiàn)，放射性漸變中我們不會(huì)再提及。線(xiàn)性漸變多年來(lái)，設(shè)計(jì)師和開(kāi)發(fā)者們都是通過(guò)切圖來(lái)實(shí)現(xiàn)漸變背景。 背景對(duì)網(wǎng)站的設(shè)計(jì)有重大的影響。它有利于建立網(wǎng)站的整體感覺(jué)，設(shè)置分組，分配優(yōu)先級(jí)，對(duì)網(wǎng)站的可用性也有相當(dāng)大的影響。 在CSS中，元素的背景可以是一個(gè)純色，一張圖，一個(gè)漸變...
摘要：屬性值則依賴(lài)于我們需要?jiǎng)?chuàng)建什么樣的漸變背景，例如線(xiàn)性漸變或放射性漸變。我們會(huì)在線(xiàn)性漸變中介紹不同種類(lèi)的供應(yīng)商前綴，但為了簡(jiǎn)便起見(jiàn)，放射性漸變中我們不會(huì)再提及。線(xiàn)性漸變多年來(lái)，設(shè)計(jì)師和開(kāi)發(fā)者們都是通過(guò)切圖來(lái)實(shí)現(xiàn)漸變背景。 背景對(duì)網(wǎng)站的設(shè)計(jì)有重大的影響。它有利于建立網(wǎng)站的整體感覺(jué)，設(shè)置分組，分配優(yōu)先級(jí)，對(duì)網(wǎng)站的可用性也有相當(dāng)大的影響。 在CSS中，元素的背景可以是一個(gè)純色，一張圖，一個(gè)漸變...
閱讀 3311·2021-11-17 09:33
閱讀 3356·2021-11-15 11:37
閱讀 3014·2021-10-19 11:47
閱讀 3255·2019-08-29 15:32
閱讀 1063·2019-08-29 15:27
閱讀 1583·2019-08-29 13:15
閱讀 987·2019-08-29 12:47
閱讀 2080·2019-08-29 11:30
