反转图像颜色和背景颜色答案

【问题标题】：Reversing the image colour and background colour反转图像颜色和背景颜色
【发布时间】：2016-10-06 06:41:06
【问题描述】：

我有一张图片（蓝色和白色的组合）和背景颜色（白色）。单击 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"; 我只能设置背景颜色。但是如何反转颜色。

【问题讨论】：

标签： css angularjs

【解决方案1】：

尝试使用 CSS 声明：

可能是这样的：

HTML：

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

CSS：

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

希望这会有所帮助。

【讨论】：

我需要在点击 div 时使用它。如何添加到那个

【解决方案2】：

不确定 filter:invert(100%) 是否真的是您所要求的，但如果如您所做的评论中所示，只需使用该样式创建一个类。比如 .filterClass{filter: invert(100%)} 然后使用这个 element.className +="filterClass";

在你的点击事件中添加那个类

【讨论】：

我只想反转图像和背景颜色的颜色。在我的情况下，我有一个白色和蓝色组合以及白色背景的图像。我需要反转颜色，无论颜色是蓝色，我都需要更改为白色，而无论它是白色，我都需要将其更改为蓝色。
this.onHomeButtonClick = function(){ element.className +="filterClass";我试过这个，但它不起作用。也将类添加到 CSS 中
将“element”替换为您也想添加类的元素。

【解决方案3】：

我希望这可以帮助你Fiddle这是一个带有背景颜色的div，你可以使用相同的技术并改变图像颜色。

【讨论】：