如何通過CSS3實(shí)現(xiàn)背景圖片色彩的梯度漸變

時(shí)間：2022-05-29 17:30:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 17:30:01 來源：網(wǎng)絡(luò)營銷

隨著網(wǎng)站的越來越普及，CSS3和HTML5必將成為網(wǎng)站前端發(fā)展的主流方向，特別是在移動(dòng)端，高端瀏覽器給前端工程師們帶來了無以言表的體驗(yàn)。

通俗的來講，CSS3可以說是CSS技術(shù)的升級(jí)版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括：盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。那么，今天我首先要在億企邦上跟大家分享的就是CSS3的Gradients（梯度漸變）。

首先我們先來看下新的梯度漸變語法，新的語法包含四個(gè)漸變函數(shù)：

linear-gradient()
　　radial-gradient()
　　repeating-linear-gradient()
　　repeating-radial-gradient()

這些函數(shù)名無需過多的解釋，我之后會(huì)在億企邦上談到更多關(guān)于循環(huán)漸變。

因?yàn)橐?guī)范仍是初稿階段，所以我們?cè)谶@些漸變函數(shù)前加以-webkit-前綴。當(dāng)以后規(guī)范不再是初稿階段，我們將能夠不加前綴而使用他們。

1、Linear Gradients（線性梯度漸變）

為元素盒模型填充線性漸變是最常用的。你只需要考慮漸變從哪個(gè)方向開始。據(jù)億企邦了解有兩種方式可以去指定它。

第一種，你可以指定漸變從哪個(gè)方向或角落開始：

linear-gradient(left, white, black)

linear-gradient(top right, white, black)

你甚至可以省略第一個(gè)參數(shù)，他將默認(rèn)為top并給出一個(gè)垂直漸變。

第二種，你可以指定漸變的角度：

linear-gradient(135deg, white, black)

角度按逆時(shí)針方向旋轉(zhuǎn)，0度時(shí)為從左向右方向。

注意在所有這些情況下，漸變足夠大以填滿元素盒模型。

2、Radial Gradients（徑向梯度漸變）

徑向漸變更加復(fù)雜，在填充時(shí)有更多的選項(xiàng)。

億企邦覺得最簡(jiǎn)單的形式是以元素盒模型中心為漸變起始，向外填充至每個(gè)角落：

radial-gradient(white, black)

這相當(dāng)于 radial-gradient(center, ellipse cover, white, black)。

第一個(gè)參數(shù)為可選，默認(rèn)為 center ，也可以是一個(gè)點(diǎn)（就像 background-position ），他允許你將原點(diǎn)放置到其它地方：

radial-gradient(10% 30%, white, black)

原點(diǎn)位置后面的參數(shù)用來指定漸變的形狀和大小，這是兩種方式之一。

這種方式用一些關(guān)鍵詞來描述形狀（circle，ellipse）和大?。╟losest-side，closest-corner，farthest-side，farthest-corner，contain，cover）例如：

radial-gradient(30% 30%, closest-corner, white, black)

radial-gradient(30% 30%, circle closest-corner, white, black)

如果你愿意，你還可以分別指定徑向漸變的水平與垂直結(jié)束半徑：

radial-gradient(center, 5em 40px, white, black)

3、Repeating Gradients（重復(fù)梯度漸變）

循環(huán)漸變 repeating-linear-gradient()和repeating-radial-gradient()

擁有完全相同的簡(jiǎn)寫語法，且整個(gè)漸變將被循環(huán)填充：

repeating-linear-gradient(left, red 10%, blue 30%)

這些?？奎c(diǎn)將被循環(huán)用于調(diào)整他們首尾相連，這常常會(huì)導(dǎo)致顏色之間過渡強(qiáng)烈。

你可以避免循環(huán)末尾的顏色:

repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)

4、Color Stops（色站）

為漸變指定顏色?？奎c(diǎn)很容易；最簡(jiǎn)單的情況下，你只需要提供一個(gè)顏色列表：

linear-gradient(left, red, green, blue)

這樣會(huì)使所有的顏色平均分布于漸變之上。

如果你愿意，你還可以為個(gè)別顏色定位具體的?？奎c(diǎn)，然后讓瀏覽器分配其它剩余的：

linear-gradient(bottom left, red 20px, yellow, green, blue 90%)

那些漸變軸線可能是條對(duì)角線；那么百分比則相應(yīng)對(duì)角線的長度。

顏色的?？奎c(diǎn)相同會(huì)使顏色之間過渡強(qiáng)烈：

linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)

億企邦點(diǎn)評(píng)：

其實(shí)，css3的這個(gè)漸變目前主要是應(yīng)用在手機(jī)前端領(lǐng)域，至于web領(lǐng)域的話，大部分情況下億企邦還是建議大家最好是用背景，用背景的好處就是，你可以讓一個(gè)不懂代碼的一個(gè)人來修改那個(gè)漸變顏色而不需要你親自動(dòng)手，這種情況一般在于做網(wǎng)站皮膚的時(shí)候（特別是數(shù)量多的時(shí)候），可以讓設(shè)計(jì)師直接更改圖片而不需要通過你再來弄。