Могу ли я изменить внешний вид html-изображения при наведении без второго изображения?

StackOverflow https://stackoverflow.com/questions/60290

  •  09-06-2019
  •  | 
  •  

Вопрос

Есть ли способ изменить внешний вид значка (т.контрастность/яркость) при наведении курсора, не требуя второго файла изображения (или не требуя скрытой части изображения)?

Это было полезно?

Решение

Вот некоторая полезная информация о непрозрачности и прозрачности изображений с помощью CSS..

Итак, чтобы создать изображение с непрозрачностью 50%, вам нужно сделать следующее:

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

А непрозрачность: часть заключается в том, как это делает Firefox, и это значение от 0,0 до 1,0. фильтр: вот как это делает IE, и это значение от 0 до 100.

Другие советы

Вы используете не тег img, а элемент с атрибутом CSS фонового изображения и устанавливаете положение фона при наведении курсора мыши.IE требует тег «a» в качестве родительского элемента для селектора :hover.Их называют css-спрайтами.

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

Вот код, с которым можно поиграть.Основная идея:поместите все возможные состояния изображения в одно большое изображение, установите «размер окна», который меньше изображения;переместить окно, используя 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>

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top