CSS3新屬性currentColor怎么用

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

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

.xxx { border: 1px solid currentColor; }

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: 0 0; }
.icon2 { background-position: -20px 0; }
.icon3 { background-position: -40px 0; }
.icon4 { background-position: -60px 0; }
.link { margin-right: 15px; }

html代碼：

更改顏色：<input id="colorInput" type="color" value="#34538b" autocomplete="off">
<p>
    <i class="icon icon1"></i><a href="##" class="link">返回</a>
    <i class="icon icon2"></i><a href="##" class="link">刷新</a>
    <i class="icon icon3"></i><a href="##" class="link">收藏</a>
    <i class="icon icon4"></i><a href="##" class="link">展開圖片</a>
</p>

js代碼：

var eleInput = document.getElementById("colorInput"),
    eleIcons = document.getElementsByTagName("i");
eleInput.onchange = function() {    var i = 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；

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

currentColor瀏覽器兼容情況：

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

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

看完了這篇文章，相信你對“CSS3新屬性currentColor怎么用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！