使用样式或 Javascript 使图像变亮答案

【问题标题】：Brightening an image using styles or Javascript使用样式或 Javascript 使图像变亮
【发布时间】：2015-07-05 20:17:20
【问题描述】：

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

提前致谢

【问题讨论】：

【解决方案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。

【讨论】：

我意识到 CSS
还添加了另一个建议，使用 Pixastic：pixastic.com/lib/docs/actions/lighten
我得到错误过滤器不是已知的 css 属性名称 opacity is not a known css property name
我太慢了。您可能会收到该错误，因为我认为它不是有效的 CSS。我不记得为什么了。但如果它有效，它就会有效。谁在乎它是否验证。
IE6 不支持锚点以外的其他元素上的 :hover 伪类。当用户将鼠标悬停在图像上时，您可以通过将图像转换为锚点或使用 JavaScript 添加/删除类来解决此问题。

【解决方案2】：

您可以使用 CSS 精灵。创建图像的 2 个版本：一个正常，一个明亮，然后使用 Photoshop 或您使用的任何工具将它们组合成 1 个图像。

关于什么是 CSS sprite here 有一个很好的解释。

当然，这可能不是您可以在您的网站上使用的东西。例如，您可能不想在大图像上使用它（它们的大小会加倍）。例如，如果您想要增亮的图像来自外部来源或由用户上传，您也不能这样做。它适用于导航栏图像和其他 UI 元素等内容。

【讨论】：

【解决方案3】：

我会用一些类似的东西：

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

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

【讨论】：

是的，我可以让它变亮图像，但它在鼠标悬停时不起作用，所以我一定做错了！ img class=“鼠标悬停”.mouseover img {不透明度：0.3；过滤器：阿尔法（不透明度= 30）； }
在这种情况下，将其更改为：img.mouseover:hover { etc.}
类需要紧跟在标签之后。然后是选择器，紧随其后。所以：tag.class:selector {等}
谢谢瑞恩，几乎在那里悬停位不起作用 .img.mouseover { filter: alpha(opacity=100);不透明度：1.0； } .img.mouseover:hover { 过滤器: alpha(opacity=30);不透明度：0.3； }