CSS染色图标（图片）
生活随笔
收集整理的這篇文章主要介紹了
CSS染色图标（图片）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前一直以為用background引入的圖標(biāo)無法染色（非字體圖標(biāo)），現(xiàn)在才知道有黑科技可以用，就是利用drop-shadow。
代碼示例
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.face1{display: inline-block;width: 40px;height: 40px;background-image: url(face.svg);}.face2{display: inline-block;width: 40px;height: 40px;overflow: hidden;}.face2 i{display: inline-block;width: 40px;height: 40px;background-image: url(face.svg);transform: translateX(-100%);-webkit-filter:drop-shadow(40px 0 #F88E1D);}.face3{display: inline-block;width: 40px;height: 40px;overflow: hidden;background-image: url(face.svg);}.face3:after{content: '';display: inline-block;width: 40px;height: 40px;transform: translateX(-100%);-webkit-filter:drop-shadow(40px 0 #F88E1D);background: inherit;}</style> </head> <body><h3>原始圖標(biāo)：</h3><span class="face1"></span><h3>染色圖標(biāo)(兩層標(biāo)簽)：</h3><span class="face2"><i></i></span><h3>染色圖標(biāo)(after)：</h3><span class="face3"></span> </body> </html>效果
注意問題
1.使用after作為第二層標(biāo)簽的這種方式，可能會(huì)出現(xiàn)最后效果有些雜色。
這是因?yàn)閍fter背景繼承了父標(biāo)簽，然后以它為drop-shadow，這時(shí)就出現(xiàn)兩個(gè)圖標(biāo)了。問題就出在父標(biāo)簽的背景圖（第三個(gè)圖標(biāo)）被疊在下面，圖標(biāo)如果有比較細(xì)的線條，疊在下面的圖標(biāo)會(huì)像糊在下面。
所以最好不要用這種方式，老老實(shí)實(shí)寫兩層標(biāo)簽。
2.在低版本的chrome里，需染色圖標(biāo)如果是在有滾動(dòng)條的區(qū)域內(nèi)，會(huì)染色不了。
這時(shí)需要在滾動(dòng)區(qū)域加屬性：
position: relative; z-index:1;總結(jié)
如果有需要染色圖標(biāo)，做成字體圖標(biāo)好些。這種drop-shadow的方式，最后再選。?
本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=1c1jbaa&title=CSS染色圖標(biāo)（圖片）
總結(jié)
以上是生活随笔為你收集整理的CSS染色图标（图片）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5--应用网页模板
- 下一篇： CSS学习笔记-04 a标签-导航练习