這篇文章主要介紹了css如何實(shí)現(xiàn)文字不同顏色的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css如何實(shí)現(xiàn)文字不同顏色文章都會(huì)有所收獲，下面我們一起來看看吧。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)晉州免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

兩種方法：1、用background-clip，語法“文字元素{background-image:linear-gradient(..);background-clip:text;color:transparent;}”。2、用mask，語法“文字元素{color:顏色值1;}文字元素:before{mask:linear-gradient(..);color:顏色值2;}”。

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

在CSS中，可以通過給文字元素添加漸變效果實(shí)現(xiàn)文字不同顏色。下面介紹2種文字漸變效果的實(shí)現(xiàn)方法。

方式一：linear-gradient()+background-clip

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

效果圖

代碼

    
    



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

代碼不多，我們來看看：

background: linear-gradient(to right, red, blue); 這行是給背景設(shè)置為漸變色，這里注意一點(diǎn)，這樣是簡寫了，其實(shí)是給background-image 設(shè)置為漸變色，不是 background-color ，是背景圖 取值為漸變色。

-webkit-background-clip: text; 這行就要說到，background-clip 屬性了 ：

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

語法 
background-clip: border-box|padding-box|content-box;    

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

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

所以，我們最后寫color: transparent;  讓文字為透明色，就是讓后面背景色顯示出來。

方式二：linear-gradient()+mask

效果圖     

代碼

    h2{
        position: relative;
        color: yellow;
    }
    h2:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }





    前端簡單說

代碼也不多，我們簡單說一下，

:before 選擇器向選定的元素 前 插入內(nèi)容。  
使用content 屬性來指定要插入的內(nèi)容。

content取值 attr 就是用來獲取屬性值的，content:attr(屬性名);

content: attr(text); 能獲取到元素的 text 屬性，這里的這個(gè)text屬性是自己自定義的一個(gè)屬性，你也可以在元素中加一個(gè) tt 屬性，像這樣  

前端簡單說

好的我們繼續(xù)說第二種方式的重點(diǎn)，mask屬性

mask屬性簡單說，就是能讓元素的某一部分顯示或隱藏。

我們看張圖就能明白，第二種方式實(shí)現(xiàn)的原理了

關(guān)于“css如何實(shí)現(xiàn)文字不同顏色”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css如何實(shí)現(xiàn)文字不同顏色”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。