使用样式或Javascript照亮图像

Question

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

提前致谢

CP

Answer 1

<强> [UPDATE]

纯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。

Answer 2

您可以使用CSS精灵。创建2个版本的图像：一个正常，一个明亮，并使用Photoshop或任何你使用的任何东西将它们组合成一个图像。

有一个很好的解释是什么CSS精灵here。

当然，这可能不是您可以在您的网站上使用的东西。例如，它可能不是你想要在大图像上使用的东西（它们的大小加倍）。如果您想要照亮的图像来自外部来源或者例如由用户上传，您也无法以这种方式进行。它适用于导航栏图像和其他UI元素之类的东西。

Answer 3

我会使用类似的东西：

  filter: alpha(opacity=80);
  opacity: 0.8;

据我所知，这是在CSS中实现它的唯一方法。这就是你追求的目标吗？