您好,登錄后才能下訂單哦!
小編給大家分享一下CSS3中的新屬性currentColor怎么用,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
currentColor顧名思意就是“當(dāng)前顏色”,準(zhǔn)確講應(yīng)該是“當(dāng)前的文字顏色”,例如:
.xxx{border:1pxsolidcurrentColor;}
currentColor表示“當(dāng)前的標(biāo)簽所繼承的文字顏色”,換種方式表示就是:currentColor=color的值。
凡事需要使用顏色值的地方,都可以使用currentColor替換,比方說背景色–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代碼:
更改顏色:<inputid="colorInput"type="color"value="#34538b"autocomplete="off">
<p>
<iclass="iconicon1"></i>返回
<iclass="iconicon2"></i>刷新
<iclass="iconicon3"></i>收藏
<iclass="iconicon4"></i>展開圖片
</p>
js代碼:
vareleInput=document.getElementById("colorInput"),
eleIcons=document.getElementsByTagName("i");
eleInput.onchange=function(){vari=0,l=eleIcons.length;for(;i<l;i+=1){
eleIcons[i].style.backgroundColor=this.value;
}
};
只需要改變背景圖片的color就更改變圖片的顏色。IE低版本也支持。
效果地址:http://www.zhangxinxu.com/study/201307/background-color-insert-background-image.html
那么現(xiàn)在使用currentColor來實(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)顏色也一起變化了*/
說明:
border和box-shadow默認(rèn)的顏色就是當(dāng)前的文字顏色,也就是類似currentColor;
在iOSSafari瀏覽器下(iOS8)下,currentColor還是有一些bug的,例如偽元素hover時(shí)候,background:currentColor的背景色不會(huì)跟著變化,怎么辦呢?等升級(jí),或者使用border來模擬。
currentColor瀏覽器兼容情況:
支持的瀏覽器:谷歌,火狐,QQ瀏覽器,IE9+
不支持的瀏覽器:360,IE低版本瀏覽器
看完了這篇文章,相信你對(duì)“CSS3中的新屬性currentColor怎么用”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。