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

Question

有一种方法来改变的图标(即,对比度/亮度)的外观,当我将光标,而不需要第二图像文件(或无需图像的隐藏部分)？

Answer 1

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

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

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

该不透明度:部分是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>