技巧分享:如何利用CSS屬性修改圖片顏色?

千鋒武漢發表於2021-03-25

熟悉前端開發的小夥伴肯定有遇到過這種情況,那就是需要給一個圖示或者圖片增加一個移動變色等屬性,傳統做法就是再新增一個顏色的圖片檔案替換,那麼有沒有可能直接利用css屬性來變更顏色呢?

其實是可以實現的,不過圖片的一些細節會無法儲存,只能使用者一些比較簡單的不需要細節的圖片,同學們請根據實際情況選擇使用哈。

原理嘛,其實很簡單的,用到的就是 CSS3 濾鏡filter中的drop-shadow,該濾鏡可以給圖片非透明區域新增投影。你可以理解為下圖

它實現的效果看上去就像使原來的物件離開頁面,然後在頁面上顯示出該物件的投影。是有一點類似box-shadow,但是二者還是有顯著差別的。

先來看一下語法:

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

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

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

三個引數分別代表:

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

效果為

接下來我們稍微更改一下原始碼,將原圖設定在div外部並隱藏,變色後的投影放置在div

如果想換成其他顏色,直接更改第三個引數就Ok了~是不是很簡單


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2764802/,如需轉載,請註明出處,否則將追究法律責任。

相關文章