小編給大家分享一下CSS3中的新屬性currentColor怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為天涯企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，天涯網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

    currentColor顧名思意就是“當(dāng)前顏色”，準(zhǔn)確講應(yīng)該是“當(dāng)前的文字顏色”，例如：

    .xxx{border:1pxsolidcurrentColor;}

    currentColor表示“當(dāng)前的標(biāo)簽所繼承的文字顏色”，換種方式表示就是：currentColor=color的值。

    凡事需要使用顏色值的地方，都可以使用currentColor替換，比方說(shuō)背景色–background-color,漸變色–gradient,盒陰影–box-shadow,SVG的填充色–fill等等。很靈活，很好用！

    當(dāng)然可以使用css實(shí)現(xiàn)背景色鏤空，可以方便控制圖標(biāo)的顏色。實(shí)現(xiàn)的原理是圖標(biāo)形狀區(qū)域是透明鏤空的，而周邊是實(shí)色的。

    css代碼：

    .icon{

    display:inline-block;

    width:16px;height:20px;

    background-image:url(sprite_icons.png);

    background-color:#34538b;/*該顏色控制圖標(biāo)的顏色*/

    }

    .icon1{background-position:00;}

    .icon2{background-position:-20px0;}

    .icon3{background-position:-40px0;}

    .icon4{background-position:-60px0;}

    .link{margin-right:15px;}

    html代碼：

    更改顏色：

    返回

    刷新

    收藏

    展開(kāi)圖片

    js代碼：

    vareleInput=document.getElementById("colorInput"),

    eleIcons=document.getElementsByTagName("i");

    eleInput.onchange=function(){vari=0,l=eleIcons.length;for(;i

    eleIcons[i].style.backgroundColor=this.value;

    }

    };

    只需要改變背景圖片的color就更改變圖片的顏色。IE低版本也支持。

    效果地址：http://www.zhangxinxu.com/study/201307/background-color-insert-background-image.html

    那么現(xiàn)在使用currentColor來(lái)實(shí)現(xiàn)這個(gè)效果：

    .icon{

    display:inline-block;

    width:16px;height:20px;

    background-image:url(../201307/sprite_icons.png);

    background-color:currentColor;/*該顏色控制圖標(biāo)的顏色*/

    }

    于是，我們想要鼠標(biāo)hover文字鏈接，其圖標(biāo)顏色要跟著一起變化，只要改變文字顏色就可以了：

    .link:hover{color:#333;}/*雖然改變的是文字顏色，但是圖標(biāo)顏色也一起變化了*/

    說(shuō)明：

    border和box-shadow默認(rèn)的顏色就是當(dāng)前的文字顏色，也就是類(lèi)似currentColor；

    在iOSSafari瀏覽器下(iOS8)下，currentColor還是有一些bug的，例如偽元素hover時(shí)候，background:currentColor的背景色不會(huì)跟著變化，怎么辦呢？等升級(jí)，或者使用border來(lái)模擬。

    currentColor瀏覽器兼容情況：

    支持的瀏覽器：谷歌，火狐，QQ瀏覽器，IE9+

    不支持的瀏覽器：360，IE低版本瀏覽器

看完了這篇文章，相信你對(duì)“CSS3中的新屬性currentColor怎么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！