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

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

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

今天我逛網(wǎng)頁的時候，見到了這種技術更為實際的應用。

看下圖所示的效果截圖：

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

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

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

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

二、background-color與背景圖鏤空技術

您可以狠狠地點擊這里：背景色鏤空技術與顏色可控圖標demo

Chrome瀏覽器下，有color控件：

三、該技術的局限性

局限性有兩點：

圖標所在的背景色純色，且不會經(jīng)常變化；

只能是純色或者漸變性質(zhì)的圖標可以使用該技術。

四、自己更進一步改進-color實現(xiàn)

以下為自己的嘗試，還沒有大規(guī)模測試，可能某些國家或某些設備會有問題，歡迎反饋。

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

答案是可以的！

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

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

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

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

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

相關CSS如下：

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

下圖為IE7瀏覽器下截圖：

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

最新評論