html - 我可以在没有第二张图像的情况下在悬停期间更改 html 图像的外观吗？

Question

当我悬停光标时，有没有办法改变图标的​​外观（即对比度/亮度），而不需要第二个图像文件（或不需要图像的隐藏部分）？

Answer 1

这里有一些关于使用 CSS 的图像不透明度和透明度的好信息。

因此，要制作不透明度为 50% 的图像，您可以这样做：

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

opacity:部分是 Firefox的处理方式，它是一个介于 0.0 和 1.0 之间的值。filter:是 IE 怎么做的，它是一个从 0 到 100 的值。

Answer 2

您不使用 img 标签，而是使用具有 background-image css 属性的元素并在悬停时设置背景位置。IE 需要一个 'a' 标签作为 :hover 选择器的父元素。它们被称为 css sprites。

一篇很棒的文章，解释了如何使用 CSS sprites。

Answer 3

这是一些可以玩的代码。基本思路：把图片所有可能的状态放到一张大图里，设置一个比图片小的“窗口大小”；使用 移动窗口background-position。

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}

<a href="#" id="test">a button</a>

Answer 4

我通常使用较小的图像（例如按钮）完成操作的方式是只显示图像的特定部分。然后图片的许多状态将组成一个更大的图片，该图片在可见端口后面移动。当有人有代码时，我会删除它。