更改其背景位置时背景图像会消失？ [英] 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>

我有一个340x40（长度为340）的图像，当我将鼠标悬停在列表项上。所以我尝试的是这个

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;

这产生了一个问题。就好像在盘旋在一个物品上之后出现的图像是一个虚拟的容器，它是340x40。当我告诉它使用背景位置向下移动5px，就像图像向下移动，除了图像所在的容器没有向下移动。我只能看到图像，如果它是在虚构的容器内，虚拟的容器下来不下移5px，图像，所以5px的图像消失。我删除了

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;

现在，当我使用background-background属性向下移动图像5px时，图像的另一个版本开始出现在CSS中的位置。所以现在我可以看到一个新的图像的底部5px和顶部335px的旧图像。为什么这是发生，我如何解决它？

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?

推荐答案

OP这是你正在寻找你只需要添加 height 这是指向jsFiddle的链接 http://jsfiddle.net/ddcxb/1/ tell我，如果这是你正在寻找。

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.

这篇关于更改其背景位置时背景图像会消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！