使用样式或Javascript照亮图像

Question

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

提前致谢

CP

Answer 1

[UPDATE]

纯CSS解决方案是使用CSS过滤器:

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.