技巧分享:如何利用CSS屬性修改圖片顏色?
熟悉前端開發的小夥伴肯定有遇到過這種情況,那就是需要給一個圖示或者圖片增加一個移動變色等屬性,傳統做法就是再新增一個顏色的圖片檔案替換,那麼有沒有可能直接利用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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何在 CSS 背景圖片中對 SVG 圖片進行著色 ,修改svg圖片顏色CSSSVG
- 利用CSS改變圖片顏色的多種方法!CSS
- 利用CSS改變圖片顏色的100種方法!CSS
- css顏色屬性詳細總結CSS
- 利用bitmap將圖片部分顏色透明
- 修改SVG圖片的大小和顏色SVG
- css 背景圖片屬性CSS
- HTML連載79-背景圖片定位區域屬性、背景顏色HTML
- Android通過程式碼修改圖片顏色Android
- PHP 修改圖片顏色(生成彩色二維碼)PHP
- svg圖片 填充顏色SVG
- CSS語法手冊(五)顏色和背景屬性(轉)CSS
- CSS實現的背景圖片替代顏色程式碼CSS
- 小技巧!CSS 提取圖片主題色功能探索CSS
- 用SVG的圖片格式如何劃入更改圖片的顏色?SVG
- 兩行 CSS 程式碼實現圖片任意顏色賦色技術CSS
- Android 顏色漸變 屬性動畫Android動畫
- 【Openxml】顏色變化屬性計算XML
- iOS 顏色製作背景圖片iOS
- css顏色CSS
- css修改input中placeholder 的字型顏色CSS
- [SVG]修改固定顏色為填充顏色SVG
- 天地圖修改主題顏色修改背景色地圖
- [分享]iOS開發-設定NavigationBar的顏色和字型屬性iOSNavigation
- 【HarmonyOS NEXT】氣泡預設顏色和API 10不同,設定popupColor屬性無法修改氣泡顏色API
- 顏色的幾個術語和屬性
- jQuery修改和獲取圖片的src屬性值jQuery
- 動態更改svg圖片的顏色SVG
- Swift 實現更改圖片的顏色Swift
- 高階切圖技巧!基於單張圖片的任意顏色轉換
- 【技術貼】DropDownList的css顏色樣式修改CSS
- CSS顏色表示CSS
- 如何修改CAD夢想畫圖繪圖視窗的背景顏色繪圖
- 修改UITabBarItem字型顏色UItabBar
- 一個提取圖片顏色的React元件React元件
- Chrome 獲取網頁顏色(文字、圖片)Chrome網頁
- iOS 去除 TabBarItem的圖片預設顏色iOStabBar
- Android 使用ColorMatrix改變圖片顏色AndroidColorMatrix