CSS 텍스트 링크 롤오버에 대한 배경 이미지 위치 지정

Question

롤오버와 함께 배경 이미지를 사용하려고하는 텍스트 링크가 있습니다 (link.gif이 투명 함, linkhover.gif은 롤오버 이미지 임).

는

나는 위치를 제외하고 노력하고 아래에있는 코드는 없습니다.

.navlink { 
background:transparent url('graphics/link.gif') center top no-repeat; 
height:70px;} 

.navlink:hover { 
background-image: url('graphics/linkhover.gif');} 

Answer 1

다음 방금 height:100%를 넣을 수 있습니다, 당신은 .navlink 주위에 부모 요소가있는 경우이

.navlink { 
    background: url('graphics/link.gif'); 
    height:70px; 
} 

.navlink:hover { 
    background: url('graphics/linkhover.gif'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100%; 
} 

Demo

처럼 배경이 전체 화면을 차지하게 시도하고 height:70px;을 제거하고 계속해서 표시됩니다 비례항. 당신이 비율을 무시하고 그냥 당신이 넣을 수 있습니다 부모를 기입 한하려면 모두 navlink의이 height:100% 및

편집

내가 발견 이후 width:100% 모든 <a> : 당신은 background-attachment: fixed을 가질 수 없습니다 그것 때문에 대신 navlink 년대의 부모의 배경 변경 업데이트 코드

(어떤 이유 나도 몰라)하게

당신이 코멘트에서 제공하는 사이트의 구조를 기반으로

질문은 관련 HTML을 포함해야한다를 작성할 때

다음에, 그 훨씬 쉽게 문제에 도움을 만들었을 것입니다

.navlink { 
    padding-top:30px; 
    text-align:center; 
    background: url('graphics/link.gif'); 
    text-decoration: none; 
} 
.navlink:hover { 
    background: url('graphics/linkhover.gif'); 
    background-position: center -55px; 
    background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/ 
    text-decoration: none; 
} 

,691,363 :

나는 귀하의 사이트 방법을 가지고 믿는 일부 재생 당신이 원하는 후 편집 2

하면이 사용210

Answer 2

스프라이트를 만들어 이미지를 하나의 파일에 배치하고 배경 위치를 조정하십시오 : 호버. CSS는 다음과 같아야합니다.

.navlink { 
    background-image: url('image'); 
    background-position: top left; 
} 

.navlink:hover { 
    background-position: top right; 
} 

CSS3 전환을 추가 할 때 멋진 효과를 얻을 수 있습니다. 그러면 이미지가 롤오버 상태로 슬라이드됩니다!