Umkehren der Bildfarbe und Hintergrundfarbe

Ich habe ein Bild (Kombination von blau und weiß in Farbe) und Hintergrundfarbe (weiß). Beim Klick auf das Div muss ich die Farben umkehren. (Hintergrundfarbe zu blau) und Bild (blauer Teil des Bildes zu weißer Farbe und weißer Teil des Bildes zu blauer Farbe).Umkehren der Bildfarbe und Hintergrundfarbe

Html:

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

Js Code:

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

bisher versucht:

$event.target.style.backgroundColor="DarkSlateBlue"; Verwendung bin ich nur in der Lage den Hintergrund zu setzen colour.But Wie invertiere ich die Farben?

Quelle

2016-10-06 kate

Versuchen Sie, die CSS deklaration verwenden:

Dieses so sein könnte:

HTML:

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

CSS:

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

Hope this er lps.

Quelle

2016-10-06 06:44:26

Ich muss dies beim Klicken auf das div.Wie ich hinzufügen, dass – kate

Nicht sicher, dass Filter: Invert (100%) ist eigentlich das, was Sie fragen, aber wenn es wie in einem Kommentar, den Sie gemacht haben, angegeben ist, machen Sie einfach eine Klasse mit diesem Stil. Wie .filterClass {filter: invert (100%)} fügen Sie dann diese Klasse in Ihr click -Ereignis mit diesem Element ein.className + = "filterClass";

Quelle

2016-10-06 07:04:21 mthomp

Ich möchte nur die Farben des Bildes und bg Farbe invertieren. In meinem Fall habe ich ein Bild, das eine Kombination aus weiß und blau und einem weißen Hintergrund ist. Ich muss die Farben umkehren, wo auch immer die Farbe blau ist, muss ich zu weiß wechseln, und wo immer es weiß ist, muss ich ändere es in blau. – kate

this.onHomeButtonClick = function() { \t \t \t \t element.className + = "Filterclass"; } Ich habe das versucht, aber es funktioniert nicht. Die Klasse wurde zu CSS hinzugefügt und – kate

ersetzen Sie "Element" durch das Element, das Sie auch hinzufügen möchten. – mthomp

Ich hoffe, das kann Ihnen helfen Fiddle dieser ist für die div mit Hintergrundfarbe können Sie die gleiche Technik verwenden und ändern Sie auch die Bildfarbe.

Quelle

2016-10-06 08:01:11

Fiddle funktioniert nicht – kate

Umkehren der Bildfarbe und Hintergrundfarbe

Antwort

Verwandte Themen