教你如何用CSS修改圖片顏色

到題目是不是嚇了一跳？css竟然還有這個操作？還真是第一次聽說~

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

它實現的效果看上去就像使原來的對象離開頁面，然后在頁面上顯示出該對象的投影。是有一點類似box-shadow，但是二者還是有顯著差別的，我后面會寫一篇專門的文章來比較二者的差別。

先來看一下語法：

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

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

用一個div將該圖片包裹住，給圖片添加

filter: drop-shadow(40px 40px yellow)

這段代碼，代表投射出一個和該圖片一樣的形狀，

三個參數分別代表：

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                width: 40px;
                height: 40px;
                border: 1px solid red;
                margin: 200px auto;
            }
            .pic{
                filter: drop-shadow(40px 40px yellow);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/delete.png" class="pic"/>
        </div>
    </body>
</html>

效果為

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                width: 40px;
                height: 40px;
                border: 1px solid red;
                margin: 200px auto;
                text-indent: -40px;
                overflow: hidden;
            }
            .pic{
                filter: drop-shadow(40px 0px yellow);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/delete.png" class="pic"/>
        </div>
    </body>
</html>

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

家好，我是龍仔。今天來聊一下前端中使用的SVG圖片。都知道前端中使用的字體圖標都是可以通過改變它的color屬性來改變圖標的顏色的。但是SVG圖片如何快速的改變圖片的顏色，而不必要引入另外一張不同顏色的SVG圖片。今天就主要來實踐一下到底如何來改變SVG圖片的顏色。下面來看一下具體代碼。

接下來就通過代碼來改變一下SVG圖片的顏色，具體來看一下代碼如何實現。這里需要簡單先說一下，這里是VO3的項目，使用SVG圖片用到了Vita plug鍵、SVG icon這樣的庫。這個庫可以很方便的使用SVG圖標。這個庫的一些具體細節大家可以參考官方的文檔，看它是如何來使用的。

首先這里來看一下，這里就是使用SVG的圖片，這里引用的是menuSVG這樣的圖標。現在可以看到它是黑色的，如何來實現？當鼠標移入上去讓它呈現不同的顏色。這里先給大家來一個提供第一個方案，也是近期在項目中使用的方案。

其實在CSS中有一個屬性是叫currentColor，是什么？就是當前元素。如果給它fill設置了currentColor，就會去取當前的標簽的color屬性。比如它是有一個style，style里面有一個color屬性，就會取color屬性。

fil是什么？file是SVG圖標的填充顏色，比如現在是黑色的，可以看到剛才其實它就是一個000，它就是一個黑色的，正是因為它是000，所以它呈現了一個黑色的樣式。

現在把它改成currentColor，就是讓它來繼承color屬性的顏色。在這里用icon-Wrap包裹了一下svg圖標。接下來就可以看一下，來給icon-Wrap定義一個color屬性，并且在這個它有一個滑動的效果，就是滑上去的以后，鼠標滑上去以后，呈現一個其他另外一個顏色。

可以看到顏色已經生效了，最開始是一個紅色的，當鼠標移上去以后，它變成了一個紫色的效果。這里主要的用到的知識點就是currentColor，它會繼承color屬性這樣的效果，這樣就沒有必要在項目中同一個圖標。

因為在項目中有很多地方都是最開始是一個不活躍的狀態的顏色，當鼠標放上去以后，它是一個活躍狀態的顏色，兩個顏色是不一樣的。如果是為了一個顏色的不同而去引入兩個只有顏色不同的圖標，這樣就太浪費資源了。所以可以通過代碼的形式改變cSS，直接來實現顏色的切換。

今天的分享就到這里，希望對大家有所幫助。

色，由三基色組成，各種說法不一，通常是指紅（R）綠（G）藍（B）三種顏色。

顏色值，由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。

每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。無論是RGB（0~255）表示，還是十六進制表示，他們其實表達的都是一樣的。

提供個表格，給正在寫HTML的你做個參考。三種顏色混合而成的具體效果：

僅有 16 種顏色名被 W3C 的 HTML 4.0 標準支持，它們是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
故如果使用其它顏色的話，就應該使用十六進制的顏色值。

在線咨詢

上一篇：程序員的開源月刊《HelloGitHub》第 68 期
下一篇：樓簽到小程序制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

教你如何用CSS修改圖片顏色

您的項目需求