Могу ли я изменить внешний вид html-изображения при наведении без второго изображения?
Вопрос
Есть ли способ изменить внешний вид значка (т.контрастность/яркость) при наведении курсора, не требуя второго файла изображения (или не требуя скрытой части изображения)?
Решение
Вот некоторая полезная информация о непрозрачности и прозрачности изображений с помощью 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>
То, как я обычно вижу вещи, выполняемые с меньшими изображениями, такими как кнопки, показывает только определенную часть изображения.Тогда многие состояния изображения составят более крупное изображение, которое смещается за видимый порт.Я удалю это, когда у кого-нибудь появится код.