CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階分享
我要評(píng)論一、背景色鏤空？什么玩意？
其實(shí)在10年的時(shí)候，3年前我就介紹過(guò)背景色鏤空技術(shù)，文章名為：“使用CSS實(shí)現(xiàn)Photoshop選區(qū)效果及應(yīng)用”。
實(shí)現(xiàn)的就是類(lèi)似下面的效果。虛框是個(gè)gif動(dòng)畫(huà)背景，水果圖片1像素鏤空，于是就有效果啦！
今天我逛網(wǎng)頁(yè)的時(shí)候，見(jiàn)到了這種技術(shù)更為實(shí)際的應(yīng)用。
看下圖所示的效果截圖：
問(wèn)題：這些小圖標(biāo)是如何實(shí)現(xiàn)的呢？
當(dāng)下，我們一般的做法是，打開(kāi)photoshop，把這些圖標(biāo)摳出來(lái)，然后周邊透明，以用在各種背景上。
然而，twitter的上圖效果是相反的做法，圖標(biāo)形狀區(qū)域是透明鏤空的，而周邊是實(shí)色的。
這種實(shí)現(xiàn)的優(yōu)點(diǎn)不言而喻，可以很自在得控制小圖標(biāo)的顏色，而這個(gè)控制就是CSS的background-color.
二、background-color與背景圖鏤空技術(shù)
您可以狠狠地點(diǎn)擊這里：背景色鏤空技術(shù)與顏色可控圖標(biāo)demo
Chrome瀏覽器下，有color控件：
三、該技術(shù)的局限性
局限性有兩點(diǎn)：
圖標(biāo)所在的背景色純色，且不會(huì)經(jīng)常變化；
只能是純色或者漸變性質(zhì)的圖標(biāo)可以使用該技術(shù)。
四、自己更進(jìn)一步改進(jìn)-color實(shí)現(xiàn)
以下為自己的嘗試，還沒(méi)有大規(guī)模測(cè)試，可能某些國(guó)家或某些設(shè)備會(huì)有問(wèn)題，歡迎反饋。
通過(guò)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)就是這廝：█，該字符連寫(xiě)就是個(gè)塊狀區(qū)域。“老板，來(lái)個(gè)糖葫蘆”，██████
我們稍微讓這個(gè)字符字號(hào)大點(diǎn)，就可以撐滿圖標(biāo)容器，于是，color實(shí)現(xiàn)的偽背景色效果就可以實(shí)現(xiàn)了！
上面為了單標(biāo)簽實(shí)現(xiàn)，所以使用了before與after偽元素，因此，IE8+瀏覽器支持，IE6/IE7瀏覽器醬油中……
目前百度瀏覽研究院的數(shù)據(jù)來(lái)看，IE6/IE7以外瀏覽器已超過(guò)80%+， 因此，條件允許，這兩個(gè)瀏覽器就可以忽略了。
相關(guān)CSS如下：
如果您希望兼容IE6/IE7瀏覽器，也是可以的，需要多一層標(biāo)簽，如下：
下圖為IE7瀏覽器下截圖：
轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活
相關(guān)文章
這篇文章主要介紹了CSS實(shí)現(xiàn)鏤空遮罩效果,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-20
這篇文章主要介紹了用純CSS實(shí)現(xiàn)鏤空效果的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-25
這篇文章主要介紹了CSS實(shí)現(xiàn)鏤空效果的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-24CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)
這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過(guò)text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07- 這篇文章主要介紹了使用CSS實(shí)現(xiàn)中間鏤空的圖片遮罩效果的方法,文中同時(shí)附帶介紹了一個(gè)用CSS3實(shí)現(xiàn)的鏤空一個(gè)圓形的代碼示例,需要的朋友可以參考下2015-12-24
這篇文章主要介紹了css3遮罩層鏤空效果的多種實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-05-11
