当我将光标悬停在光标上时，是否有一种方法可以更改图标的外观(即对比度/亮度)，而无需第二个图像文件(或者不需要图像的隐藏部分)？

解决方案

回答

我通常以较小的图像(例如按钮)来查看事物的处理方式，即仅显示图像的特定部分。然后，图片的许多状态将组成一个较大的图片，该图片会在可见端口后面移动。当有人有代码时，我将其删除。

回答

这是有关CSS图像不透明度和透明度的一些很好的信息。

因此，要使图像的不透明度为50％，我们可以执行以下操作：

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

opacity：部分是Firefox的工作方式，它的值在0.0到1.0之间。 filter：IE的工作方式，它是一个介于0到100之间的值。

回答

我们不使用img标签，而是使用具有background-image css属性的元素并在悬停时设置background-position。 IE需要一个'a'标记作为：hover选择器的父元素。它们被称为CSS精灵。

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

回答

这是一些代码。基本思想：将图片的所有可能状态放入一张大图片中，设置一个"窗口大小"，该大小小于图片；使用" 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>