在图像的一部分反转颜色 - HTML，CSS，JS [英] inverting colors in part of an image - HTML, CSS, JS

问题描述

有没有方法只反转图像的一部分？我有一个选择器栏的东西，我想要选择的图标倒置。不幸的是，当栏转换到不同的选择时，这看起来非常糟糕，因为图标立即改变颜色。

Is there a way to invert only part of an image? I have a "selector bar" sort of thing, and I want the icon that's selected to be inverted. Unfortunately, this looks really bad when the bar is transitioning to a different selection, as the icon immediately changes color. The "selector" should slide along the bar while transitioning.

我在说的简单例子可以找到这里

Simple example of what I'm talking about can be found here

我现在想出的最佳解决方案是在选择器元件上放置新的反转图像，并且在选择器正在移动的相反方向上移动图像。这将给人的幻觉，所覆盖的图像的切片被倒置。这是真的最好的方法吗？

The best solution I can come up with right now is to put a new, inverted image on the selector element, and move the image the opposite direction the selector is moving. That would give the illusion that the slice of the image that's covered is inverted. Is that really the best way to do it?

推荐答案

创建一个零宽度和高度的元素， outline：8px solid invert 。然后用你的选择器移动这个元素，这将反转它传递的东西。

Create an element with zero width and height, and outline: 8px solid invert. Then move this element around with your selector, and this will invert the stuff that it passes over.

这篇关于在图像的一部分反转颜色 - HTML，CSS，JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！