css如何讓文本域中字用不同顏色

這篇文章主要介紹“css如何讓文本域中字用不同顏色”，在日常操作中，相信很多人在css如何讓文本域中字用不同顏色問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css如何讓文本域中字用不同顏色”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、永勝網(wǎng)站維護(hù)、網(wǎng)站推廣。

實(shí)現(xiàn)步驟：1、使用linear-gradient()給文本域添加漸變背景效果，語(yǔ)法“background-image: linear-gradient(...);”；2、使用background-clip屬性和color屬性讓漸變背景色只在文本域的文字上顯示，即讓文字漸變有不同顏色，語(yǔ)法“background-clip: text;color: transparent;”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在CSS中，可以通過(guò)給文本域中文字添加漸變效果實(shí)現(xiàn)文字不同顏色。

css3文字漸變色：linear-gradient()+background-clip

CSS 中并沒(méi)有直接的屬性來(lái)設(shè)置文字漸變，通常文字只能是純色。不過(guò)可以通過(guò)背景裁剪 background-clip讓背景色在文本區(qū)域顯示出來(lái)，看著就像是文字有了漸變

效果圖

代碼

    
    



	   為你定制 發(fā)現(xiàn)精彩

代碼不多，我們來(lái)解析一下：

background-image: linear-gradient(to right, red, blue);是背景圖 取值為漸變色。

漸變效果是作用在背景上的，怎么讓該效果作用在文字上？這就使用到background-clip 屬性。因?yàn)樗且粋€(gè)新屬性，有兼容問(wèn)題，因此要加前綴

background-clip: text;
-webkit-background-clip: text;

background-clip 屬性 規(guī)定背景的繪制區(qū)域

語(yǔ)法：background-clip: border-box|padding-box|content-box;

上面沒(méi)有說(shuō)取值 text 的情況，看到前面的前綴，大家應(yīng)該也能想到，它的兼容性問(wèn)題了，目前還不是能所有瀏覽器都支持。

取值為text的意思，就是以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉。

可以看到，有一點(diǎn)點(diǎn)的漸變，但不明顯；這是因?yàn)槲淖直旧硪灿蓄伾蓄伾奈淖謺?huì)覆蓋在背景之上。所以，我們最后寫(xiě)color: transparent; 讓文字為透明色，就是讓后面背景色顯示出來(lái)。

到此，關(guān)于“css如何讓文本域中字用不同顏色”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文標(biāo)題：css如何讓文本域中字用不同顏色
分享路徑：http://m.jiaotiyi.com/article/jgpshj.html