Могу ли я изменить внешний вид 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, а элемент с атрибутом css background-image и устанавливаете background-position при наведении курсора. IE требует тег 'a' в качестве родительского элемента для селектора: hover. Они называются css sprites.

Отличная статья, объясняющая, как использовать CSS-спрайты .

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

То, как я обычно вижу вещи, сделанные с меньшими изображениями, например кнопки, когда отображается только определенная часть изображения. Тогда многие состояния изображения составят большую картину, которая смещается вокруг видимого порта. Я удалю это, когда у кого-то будет код.