使用样式或Javascript来增亮图像 [英] Brightening an image using styles or Javascript

问题描述

我想使用css或javascript在鼠标悬停时调亮我的网页上的图片。
我看到一些在样式中使用不透明度和过滤器的示例，但是它们似乎不适合我。

I would like to brighten an image on my webpage on mouseover using css or javascript. Ive seen some examples using opacity and filters in styles but they dont seem to work for me.

提前感谢

CP

推荐答案

[UPDATE]

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

A pure CSS solution would be to use CSS filters:

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

这里我们为悬停的所有图片增加50％的亮度。

Here we add 50% brightness to all images on hover.

为什么不呢？您可以随时将父容器的背景设置为#fff（白色），然后降低图片的不透明度。

Why not? You can always set the background of the parent container to #fff (white) and then lower the opacity of the image.

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 。

Another solution is to use a JavaScript library, such as Pixastic.

这篇关于使用样式或Javascript来增亮图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！