|
導讀網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本章給大家說說CSS3新屬性currentColor的使用以及currentColor屬性的兼容性。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。currentColor顧名思意就是“當前顏色”,準確講應該是“當前的文字顏色”,例如: .xxx { border: 1px solid currentColor; }currentColor表示“當前的標簽所繼承的文字顏色”,換種方式表示就是:currentColor = color的值。 凡事需要使用顏色值的地方,都可以使用currentColor替換,比方說背景色 – background-color, 漸變色 – gradient, 盒陰影 – box-shadow, SVG的填充色 – fill等等。很靈活,很好用! 當然可以使用css實現(xiàn)背景色鏤空,可以方便控制圖標的顏色。實現(xiàn)的原理是圖標形狀區(qū)域是透明鏤空的,而周邊是實色的。 css代碼: .icon {
display: inline-block;
width: 16px; height: 20px;
background-image: url(sprite_icons.png);
background-color: #34538b; /* 該顏色控制圖標的顏色 */
}
.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來實現(xiàn)這個效果: .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; 在iOS Safari瀏覽器下(iOS8)下,currentColor還是有一些bug的,例如偽元素hover時候,background:currentColor的背景色不會跟著變化,怎么辦呢?等升級,或者使用border來模擬。 currentColor瀏覽器兼容情況: 支持的瀏覽器:谷歌,火狐,QQ瀏覽器,IE9+ 不支持的瀏覽器:360,IE低版本瀏覽器 詳細介紹請查看:http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/ 以上就是CSS3新屬性currentColor的使用與兼容性介紹的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!