這篇文章主要講解了“如何使用css3背景漸變中的透明度來設(shè)置不同顏色的背景漸變”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用css3背景漸變中的透明度來設(shè)置不同顏色的背景漸變”吧！

站在用戶的角度思考問題，與客戶深入溝通，找到鼎城網(wǎng)站設(shè)計與鼎城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋鼎城地區(qū)。

項目最近這幾天正在做不同主題的顏色配置方案，要根據(jù)用戶輸入的顏色來配置整個主題的顏色，讓人頭疼的是，其中一個主題所有的列表頭部背景色都是2到3組漸變值的線性漸變，也就是說，要根據(jù)用戶輸入的顏色值生成不同的但相似度很近的漸變顏色。我上網(wǎng)查了些資料，現(xiàn)在也有js支持根據(jù)你輸入的網(wǎng)頁內(nèi)容自動填充漸變色，但是對于我這種js不是很好的人來說，還是想從css3上找點方法出來。

我發(fā)現(xiàn)css3的背景漸變中的透明度可以解決這個問題（前提是背景漸變的顏色是相近的）。

我在這里簡單說一下css3背景漸變中的線性漸變。線性漸變的一般結(jié)構(gòu)是：

代碼如下:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

其中各個瀏覽器渲染不同，又分為：

Webkit:

代碼如下:

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

漸變類型 - 在屬性里-webkit-linear-gradient
漸變從哪開始(top)
顏色取值和在漸變中的位置 (rgba(0,0,0,0.1) 40%)

下面的寫法是用于safari舊版本的

代碼如下:

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));

漸變類型 (linear)
漸變開始的X Y 軸坐標(0 0 或者left-top)
漸變結(jié)束的X Y 軸坐標(0 100% 或者left-bottom)
顏色取值 (color-stop(40%, rgba(0,0,0,0.1)))

Mozilla:

代碼如下:

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

Firefox渲染漸變的寫法和Safari大致相同，不同的是需要將漸變屬性改為-moz-linear-gradient

Opera:

代碼如下:

background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

按照上面的寫法，讓Opera瀏覽器渲染直接將屬性改為-o-linear-gradient，是不是很簡單？

IE:

IE比較頑固，不支持漸變，但是提供了漸變?yōu)V鏡

代碼如下:

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');

說了這么多，大家對例子里rgba(0, 0, 0, 0.1) 中的0.1是不是很好奇？沒錯，解決這個頭疼問題的關(guān)鍵就是它 - 漸變透明度。設(shè)置漸變透明度（值從0.1-0.9）可以使?jié)u變顏色處在不同值的透明度下，也就是說通過透明度，背景可以呈現(xiàn)不同透明度下的背景顏色。

下面圖片是用上面代碼生成的背景漸變：

是不是看不出漸變透明（感覺灰灰的）？沒錯，因為顏色取值是從白到黑，那中間的過渡色自然就是灰色的了。但是如果你在加上一個背景顏色的話，那效果就出來了。

比如我們加個background-color: #92D050：

你只需要配置background-color, 就可以讓背景呈現(xiàn)不同的漸變色。

完整的代碼：

代碼如下:

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-color: #669900;

其中rgba()中的顏色(rgb)一般取白色（255，255，255）或者黑色（0,0,0）, 而透明度的設(shè)置就看你自己想要什么樣的漸變效果了。

下面是幾個不同漸變色的例子：

代碼如下:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

代碼如下:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

代碼如下:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.9) 99%);

所以如果能很好的運用背景漸變的透明度，可以在很大程度上定義統(tǒng)一的背景漸變色，而用戶只需要輸入一個顏色域，就可以把主題配置成想要的漸變效果。不過遺憾的是，這種方法就現(xiàn)在而言，只能適用于背景漸變顏色相近的主題。多余一種顏色的背景漸變還是得用這種寫法

代碼如下:

background: linear-gradient(to bottom, #396E8E 0%, #336888 29%, #225777 67%, #194E6E 100%);

感謝各位的閱讀，以上就是“如何使用css3背景漸變中的透明度來設(shè)置不同顏色的背景漸變”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對如何使用css3背景漸變中的透明度來設(shè)置不同顏色的背景漸變這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

分享標題：如何使用css3背景漸變中的透明度來設(shè)置不同顏色的背景漸變-創(chuàng)新互聯(lián)
分享路徑：http://aaarwkj.com/article38/gjgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)