javascript - 使用样式或 Javascript 使图像变亮

Question

我想在鼠标悬停时使用 css 或 javascript 使网页上的图像变亮。 我看过一些在样式中使用不透明度和过滤器的示例，但它们似乎对我不起作用。

提前致谢

CP

Answer 1

[更新]

纯 CSS 解决方案是使用 CSS filters :

img:hover {
    filter: brightness(1.5);
}

在这里，我们为悬停时的所有图像添加 50% 的亮度。

---

为什么不呢？您始终可以将父容器的背景设置为#fff(白色)，然后降低图像的不透明度。

HTML:

<div class="white">
    <img src="image.jpg" alt="Image" />
</div>

CSS:

.white { background: #fff; }
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

另一种解决方案是使用 JavaScript 库，例如 Pixastic .