CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階分享

發(fā)布時(shí)間：2013-10-10 20:40:16 作者：佚名

這篇文章主要介紹了CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階相關(guān)資料，需要的朋友可以參考下

一、背景色鏤空？什么玩意？

其實(shí)在10年的時(shí)候，3年前我就介紹過背景色鏤空技術(shù)，文章名為：“使用CSS實(shí)現(xiàn)Photoshop選區(qū)效果及應(yīng)用”。

實(shí)現(xiàn)的就是類似下面的效果。虛框是個(gè)gif動(dòng)畫背景，水果圖片1像素鏤空，于是就有效果啦！

今天我翻墻逛twitter的時(shí)候，見到了這種技術(shù)更為實(shí)際的應(yīng)用。

看下圖所示的效果截圖：
twitter上的一些圖標(biāo)截圖

問題：這些小圖標(biāo)是如何實(shí)現(xiàn)的呢？

當(dāng)下，我們一般的做法是，打開photoshop，把這些圖標(biāo)摳出來，然后周邊透明，以用在各種背景上。

然而，twitter的上圖效果是相反的做法，圖標(biāo)形狀區(qū)域是透明鏤空的，而周邊是實(shí)色的。

sprite背景圖

這種實(shí)現(xiàn)的優(yōu)點(diǎn)不言而喻，可以很自在得控制小圖標(biāo)的顏色，而這個(gè)控制就是CSS的background-color.

二、background-color與背景圖鏤空技術(shù)

您可以狠狠地點(diǎn)擊這里：背景色鏤空技術(shù)與顏色可控圖標(biāo)demo

背景色改變，圖標(biāo)顏色改變demo截圖

Chrome瀏覽器下，有color控件：
Chrome下color控件實(shí)現(xiàn)的效果張鑫旭-鑫空間-鑫生活

復(fù)制代碼

代碼如下:

.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; }<a href="##" class="link">返回</a>
<a href="##" class="link">刷新</a>
<a href="##" class="link">收藏</a>
<a href="##" class="link">展開圖片</a>

三、該技術(shù)的局限性

局限性有兩點(diǎn)：

圖標(biāo)所在的背景色純色，且不會(huì)經(jīng)常變化；
只能是純色或者漸變性質(zhì)的圖標(biāo)可以使用該技術(shù)。
四、自己更進(jìn)一步改進(jìn)-color實(shí)現(xiàn)
以下為自己的嘗試，還沒有大規(guī)模測試，可能某些國家或某些設(shè)備會(huì)有問題，歡迎反饋。

通過background-color控制圖標(biāo)顏色已經(jīng)非常靈活了，但是，還不是足夠靈活。舉個(gè)例子，我希望圖標(biāo)的顏色直接與后面的文字一致，文字顏色(color)可以直接從父級(jí)繼承，但是圖標(biāo)如果是background-color實(shí)現(xiàn)，則不能繼承，那能不能使用color實(shí)現(xiàn)圖標(biāo)效果呢？

答案是可以的！

思路如下，使用字符實(shí)現(xiàn)實(shí)色背景效果；然后，鏤空背景圖覆蓋在上面，于是效果實(shí)現(xiàn)，over!

腦中常備很多奇怪字符，因此，第一反應(yīng)就是這廝：█，該字符連寫就是個(gè)塊狀區(qū)域。“老板，來個(gè)糖葫蘆”，██████

我們稍微讓這個(gè)字符字號(hào)大點(diǎn)，就可以撐滿圖標(biāo)容器，于是，color實(shí)現(xiàn)的偽背景色效果就可以實(shí)現(xiàn)了！

一例頂千言，您可以狠狠地點(diǎn)擊這里：背景色鏤空技術(shù)之color屬性實(shí)現(xiàn)顏色可控圖標(biāo)demo

color屬性與顏色可控圖標(biāo)實(shí)現(xiàn)

上面為了單標(biāo)簽實(shí)現(xiàn)，所以使用了before與after偽元素，因此，IE8+瀏覽器支持，IE6/IE7瀏覽器醬油中……

目前百度瀏覽研究院的數(shù)據(jù)來看，IE6/IE7以外瀏覽器已超過80%+，因此，條件允許，這兩個(gè)瀏覽器就可以忽略了。

相關(guān)CSS如下：

復(fù)制代碼

代碼如下:

.icon {
display: inline-block;
width: 16px; height: 20px;
overflow: hidden;
position: relative;
}
.icon:before {
content: '█';
margin: -5px 0 0 -5px;
font-size: 30px;
position: absolute;
}
.icon:after {
content: '';
display: block;
width: 100%; height: 100%;
background-image: url(sprite_icons.png);
position: relative;
}
.icon1:after { background-position: 0 0; }
.icon2:after { background-position: -20px 0; }
.icon3:after { background-position: -40px 0; }
.icon4:after { background-position: -60px 0; }
.out { color: #34538b; /* 父標(biāo)簽上的該顏色控制圖標(biāo)的顏色 */}

如果您希望兼容IE6/IE7瀏覽器，也是可以的，需要多一層標(biāo)簽，如下：

復(fù)制代碼

代碼如下:

復(fù)制代碼

代碼如下:

.icon {
display: inline-block;
width: 16px; height: 20px;
line-height: 20px;
font-size: 30px;
overflow: hidden;
position: relative;
}
.icon s {
width: 100%; height: 100%;
background-image: url(sprite_icons.png);
position: absolute; left: 0; top: 0;
}
.icon1 s { background-position: 0 0; }
.icon2 s { background-position: -20px 0; }
.icon3 s { background-position: -40px 0; }
.icon4 s { background-position: -60px 0; }
.out { color: #34538b; /* 父標(biāo)簽上的該顏色控制圖標(biāo)的顏色 */}

您可以狠狠地點(diǎn)擊這里：背景色鏤空+color屬性實(shí)現(xiàn)顏色可控圖標(biāo)兼容IE6/IE7 demo

下圖為IE7瀏覽器下截圖：

IE7瀏覽器下截圖張鑫旭-鑫空間-鑫生活

轉(zhuǎn)載請(qǐng)注明來自張鑫旭-鑫空間-鑫生活