扭轉圖像顏色和背景顏色

我有一個圖像（藍色和白色的組合）和背景顏色（白色）。點擊div時，我需要反轉顏色。（背景色爲藍色）和圖像（圖像的藍色部分爲白色，圖像的白色部分爲藍色）。扭轉圖像顏色和背景顏色

HTML：

<div class="col" ng-click="onHomeButtonClick()"> 
         <img src="images/iconHome.png" class="menu-icons"><br> 
         </div>

JS代碼：

this.onHomeButtonClick = function($event){ 
     $event.target.style.backgroundColor="DarkSlateBlue"; 
     }

到目前爲止已經試過：

使用$event.target.style.backgroundColor="DarkSlateBlue";我只是能夠設置背景colour.But我如何反轉顏色。

2016-10-06 kate

嘗試使用CSS deklaration：

這可能是這樣的：

HTML：

<img src="images/iconHome.png" id="imageToInvert" class="menu-icons">

CSS：

#imageToInvert:hover { 
    filter: invert(100%); 
}

希望這會他LPS。

2016-10-06 06:44:26

我需要使用此點擊的div.How我添加到， – kate

不確定篩選器：反轉（100％）實際上是您要求的，但如果它是在您所做的評論中指出的，那麼只需創建一個具有該樣式的類。如.filterClass {filter：invert（100％）}，然後使用這個element.className + =「filterClass」在你的點擊事件中添加該類。

2016-10-06 07:04:21 mthomp

我只是想反轉圖像和bg顏色的顏色。在我的情況下，我有一個圖像，它是白色和藍色，白色背景的組合。我需要反轉顏色，無論顏色是藍色還是白色，我都需要將其更改爲藍色。 – kate

this.onHomeButtonClick = function（）{ \t \t \t \t element.className + =「filterClass」; } 我試過了，但它不起作用。將該類添加到CSS中 – kate

用您想要添加該類的元素替換「元素」。 – mthomp

我希望這可以幫助你Fiddle這一個是爲背景顏色的div你可以使用相同的技術和改變圖像的顏色。

2016-10-06 08:01:11

小提琴不工作 – kate

回答