Фоновое изображение исчезает при смене его фона-положения?

Итак, у меня есть список ссылок, как и так

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

и у меня есть изображение размером 340x40 (длина - 340), которое я хочу отобразить под элементом списка при наведении курсора на элементы списка. Итак, что я пытался это

li:hover {
    background: url(../images/liHover.png);
}

Когда я это делаю, изображение появляется прямо над элементом списка, а не под ним. Поэтому я попытался добавить

background-position: 0px 5px;
repeat: no-repeat;

Это дало проблему. Как будто изображение, появившееся после наведения на предмет, находилось в воображаемом контейнере размером 340х40. И когда я сказал, чтобы он перемещался на 5 пикселей вниз, используя background-position, изображение словно перемещалось вниз, за ​​исключением того, что контейнер, в котором находилось изображение, не двигался вниз. Я могу видеть изображение только в том случае, если оно находится внутри воображаемого контейнера, а воображаемый контейнер не перемещается вниз на 5px, изображение делает, поэтому изображение 5px исчезает. Я удалил

repeat: no-repeat;

и теперь другая версия изображения начинает появляться, когда я перемещаю изображение на 5 пикселей вниз, используя background-position в CSS. Так что теперь я вижу нижние 5 пикселей нового изображения и верхние 335 пикселей старого изображения. Почему это происходит и как мне это исправить?

Источник

3 ответа

Решение

OP Это то, что вы искали, нужно только добавить height Вот ссылка на jsFiddle http://jsfiddle.net/ddcxb/1/ скажите мне, если это то, что вы искали.

Источник

Это называется CSS-спрайт. Чтобы уменьшить количество HTTP-запросов, необходимых для загрузки изображений на страницу, все изображения объединяются в одно изображение. Для отображения изображений в пределах одного изображения, ширина и высота каждого элемента (например, li) действует как область просмотра, в то время как background-position определяет расположение одиночного изображения, как если бы это был фон, и видны только ширина и высота изображения в элементе.

Я рекомендую прочитать учебник по CSS Sprites, чтобы вы лучше поняли концепцию.

Источник

Как насчет размещения CSS на самой ссылке? лайк:

<ul>
    <li><a href="..."></a></li>
</ul>

a:hover {
    background: url(../images/liHover.png);
    background-repeat: no-repeat;
    background-position: fixed;
}

а затем попробуйте использовать положение фона как фиксированное..? надеюсь, что это будет работать..

Источник
Другие вопросы по тегам