建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下CSS3中的新屬性currentColor怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為天涯企業(yè)提供專業(yè)的成都網站設計、網站建設，天涯網站改版等技術服務。擁有十年豐富建站經驗和眾多成功案例,為您定制開發(fā)。
currentColor顧名思意就是“當前顏色”，準確講應該是“當前的文字顏色”，例如：
.xxx{border:1pxsolidcurrentColor;}
currentColor表示“當前的標簽所繼承的文字顏色”，換種方式表示就是：currentColor=color的值。
凡事需要使用顏色值的地方，都可以使用currentColor替換，比方說背景色–background-color,漸變色–gradient,盒陰影–box-shadow,SVG的填充色–fill等等。很靈活，很好用！
當然可以使用css實現背景色鏤空，可以方便控制圖標的顏色。實現的原理是圖標形狀區(qū)域是透明鏤空的，而周邊是實色的。
css代碼：
.icon{
display:inline-block;
width:16px;height:20px;
background-image:url(sprite_icons.png);
background-color:#34538b;/*該顏色控制圖標的顏色*/
}
.icon1{background-position:00;}
.icon2{background-position:-20px0;}
.icon3{background-position:-40px0;}
.icon4{background-position:-60px0;}
.link{margin-right:15px;}
html代碼：
更改顏色：
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 那么現在使用currentColor來實現這個效果： .icon{ display:inline-block; width:16px;height:20px; background-image:url(../201307/sprite_icons.png); background-color:currentColor;/*該顏色控制圖標的顏色*/ } 于是，我們想要鼠標hover文字鏈接，其圖標顏色要跟著一起變化，只要改變文字顏色就可以了： .link:hover{color:#333;}/*雖然改變的是文字顏色，但是圖標顏色也一起變化了*/ 說明： border和box-shadow默認的顏色就是當前的文字顏色，也就是類似currentColor； 在iOSSafari瀏覽器下(iOS8)下，currentColor還是有一些bug的，例如偽元素hover時候，background:currentColor的背景色不會跟著變化，怎么辦呢？等升級，或者使用border來模擬。 currentColor瀏覽器兼容情況： 支持的瀏覽器：谷歌，火狐，QQ瀏覽器，IE9+ 不支持的瀏覽器：360，IE低版本瀏覽器 看完了這篇文章，相信你對“CSS3中的新屬性currentColor怎么用”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
新聞名稱：CSS3中的新屬性currentColor怎么用
分享網址：http://fisionsoft.com.cn/article/jjcssj.html
