Background image disappears when changing its background-position?

问题

Okay so I have a list of links, like so

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

and I have a 340x40 (340 is the length) image which I want to appear below the list item as I hover over the list items. So what I tried is this

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

When I do this, the image appears right on top of the list item, not below it. So I tried adding

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

This gave a problem. It was as if the image which appeared after hovering over an item was in an imaginary container which is 340x40. And when I told it to move 5px down using the background-position, it's as if the image move down except the container which the image was in did not move down. I can only see the image if it is inside the imaginary container, and the imaginary container down not move down 5px, the image does, so 5px of the image disappears. I removed

repeat: no-repeat;

and now another version of the image starts to appear when I move the image 5px down using the background-position in the CSS. So now I can see the bottom 5px of a new image and the top 335px of the old image. Why is this happening and how do I fix it?

回答1:

OP Is this what you were looking for you only needed to added height here is a link to the jsFiddle http://jsfiddle.net/ddcxb/1/ tell me if this is what you were looking for.

回答2:

how about putting the css to the link itself? like:

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

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

and then try using the background position as fixed..? hope it would work..

回答3:

It's called a CSS sprite. In order to reduce the number of HTTP requests needed to load images on the page, all of the images are combined into a single image. In order to display images within the single image, the width and height of each element (e.g. a li) acts as a viewport, while the background-position determines the positioning of the single image as if it were the background and only the width and height of the image within the element are visible.

I recommend reading a tutorial on CSS Sprites so you understand the concept better.

来源：https://stackoverflow.com/questions/19215885/background-image-disappears-when-changing-its-background-position

标签

javascript

html

css

mouseover