Вы когда-нибудь замечали, что иногда, когда вы наводите курсор на изображение, оно на секунду гаснет, а затем загружает изображение? Однако, когда вы отступаете, все идеально.
Вот пример того, что я имею в виду, используя мое изображение подземной лестницы (разделенное на две части).
Это связано с тем, что необходимо загрузить два отдельных изображения, а второе (при наведении курсора) загружается дольше, когда активирован эффект прокрутки.
В этом посте я покажу вам, как удалить это отставание, используя метод CSS, который загружает все изображение сразу и отображает его часть.
Совместите картинку
Первый шаг для этого – объединить обе половины изображения в одну. Для этого вы можете использовать любой редактор изображений по вашему выбору, просто скопируйте оба изображения, удвойте высоту и вставьте неактивное изображение поверх активного.
Изображение посередине должно быть тем, что вы ищете. Теперь перейдем к CSS.
Код
Первый шаг в CSS – ограничить высоту изображения половиной (в основном, чтобы отображалась только верхняя лестница).
Для целей этого руководства мы будем использовать класс с именем .rollover-tut. Поскольку исходное изображение лестницы имеет размер 153 × 149, мы будем использовать этот код CSS:
.rollover-tut {
height: 149px;
width: 153px;
display: block;
}
Поскольку мы создаем ссылку, мы будем использовать следующий HTML-код:
На этом этапе ваша ссылка должна выглядеть как исходное изображение лестницы, без эффекта прокрутки (пока).
Чтобы эффект наведения работал, мы будем использовать свойство CSS, называемое background-position, в псевдоклассе: hover.
.rollover-tut:hover {
background-position: 0 -149px;
}
С помощью приведенного выше кода CSS вы перемещаете фоновое изображение на 149 пикселей (помните, высота лестничного изображения или половина обоих вместе).
Более простой способ запомнить – использовать следующий код прокрутки, который будет иметь тот же эффект, что и выше, и вам не придется запоминать какие-либо числа (подсказка: Art Webb через комментарии):
.rollover-tut:hover {
background-position: bottom left;
}
И вот что вы получите:
Обратите внимание, что теперь нет задержки между эффектом наведения, так как все изображение загружается сразу.
вывод
Эту же технику можно использовать практически для любого эффекта наведения фонового изображения. Я не уверен, проверял ли кто-нибудь из вас мой личный макет блога в последнее время, но я широко использую его почти для каждой ссылки, используя фоновое изображение (и кнопку отправки в моей форме комментариев).
Надеюсь, всем понравился этот совет по CSS. Если у вас есть идеи для будущих постов с советами по CSS, дайте мне знать в комментариях.
