熟悉前端開發(fā)的小伙伴肯定有遇到過這種情況，那就是需要給一個圖標(biāo)或者圖片增加一個移動變色等屬性，傳統(tǒng)做法就是再添加一個顏色的圖片文件替換，那么有沒有可能直接利用css屬性來變更顏色呢？

      其實(shí)是可以實(shí)現(xiàn)的，不過圖片的一些細(xì)節(jié)會無法保存，只能用戶一些比較簡單的不需要細(xì)節(jié)的圖片，同學(xué)們請根據(jù)實(shí)際情況選擇使用哈。

      原理嘛，其實(shí)很簡單的，用到的就是 CSS3 濾鏡filter中的drop-shadow，該濾鏡可以給圖片非透明區(qū)域添加投影。你可以理解為下圖

      它實(shí)現(xiàn)的效果看上去就像使原來的對象離開頁面，然后在頁面上顯示出該對象的投影。是有一點(diǎn)類似box-shadow，但是二者還是有顯著差別的。

      先來看一下語法：

      filter:drop-shadow(水平陰影偏移距離 垂直陰影偏移距離 投射的陰影顏色 );

      我們準(zhǔn)備一張背景色是透明的圖片(圖片尺寸40px X 40px)，

      用一個div將該圖片包裹住，給圖片添加filter: drop-shadow(40px 40px yellow) 這段代碼，代表投射出一個和該圖片一樣的形狀。

      三個參數(shù)分別代表：

      水平向右移動40px，垂直向下移動40px，投射出的形狀顏色為黃色。

      效果為

      接下來我們稍微更改一下原代碼，將原圖設(shè)置在div外部并隱藏，變色后的投影放置在div中

      如果想換成其他顏色，直接更改第三個參數(shù)就Ok了~是不是很簡單

      學(xué)習(xí)web前端，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對從零基礎(chǔ)小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對學(xué)習(xí)web前端開發(fā)需要掌握的知識有個清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~