배경 위치를 변경할 때 배경 이미지가 사라 집니까? 좋아

Question

그래서 그렇게

<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; 

이로 인해 문제가 발생했습니다. 마치 항목 위로 마우스를 가져간 후 나타나는 이미지가 340x40 크기의 가상 컨테이너에있는 것처럼 보였습니다. 그리고 배경 위치를 사용하여 5 픽셀 아래로 이동한다고 말하면 이미지가있는 컨테이너를 제외하고 이미지가 아래로 이동하지 않는 것입니다. 이미지가 가상 컨테이너 안에 있고 가상 컨테이너가 5px 아래로 이동하지 않으면 이미지 만 볼 수 있으며 이미지는 5px 이미지가 사라집니다. 제가 제거했습니다

repeat: no-repeat; 

이제는 CSS의 배경 위치를 사용하여 이미지를 5px 아래로 이동할 때 이미지의 다른 버전이 나타나기 시작합니다. 이제 새 이미지의 하단 5px와 이전 이미지의 상단 335px를 볼 수 있습니다. 왜 이런 일이 일어나고 어떻게 해결할 수 있습니까?

Answer 1

OP 여기에 height을 추가하기 만하면 되었습니까? 여기 jsFiddle http://jsfiddle.net/ddcxb/1/에 대한 링크가 있습니다.

Answer 2

CSS 스프라이트라고합니다. 페이지에 이미지를로드하는 데 필요한 HTTP 요청 수를 줄이기 위해 모든 이미지가 단일 이미지로 결합됩니다. 단일 이미지 내에 이미지를 표시하려면 각 요소의 너비와 높이 (예 : li)가 뷰포트의 역할을하는 반면 background-position은 단일 이미지의 위치를 ​​마치 배경 인 것처럼 결정하고 너비와 높이 만 요소 내의 이미지가 표시됩니다.

나는 더 나은 개념을 이해할 수 있도록 a tutorial on CSS Sprites을 읽는 것이 좋습니다.

Answer 3

링크 자체에 CSS를 넣는 것은 어떻습니까? like :

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

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

그런 다음 고정 된 배경 위치를 사용하십시오. 희망이 ... 작동합니다.