배경 반복으로 CSS 스프라이트를 사용할 수 없습니다.

내 스프레드 시트가 내 페이지에서 작동하도록하려고합니다. 하지만 background-repeat : no-repeat을 추가하면됩니다. 그러면 CSS 스프라이트가 작동을 멈춘다. 스타일 시트에서 제거하면 다시 작동합니다.배경 반복으로 CSS 스프라이트를 사용할 수 없습니다.

나는 background-repeat을 사용할 수없는 이유를 알 수 없었다.

여기 내 코드가 있습니다. 또한 jsfiddle에 업로드하면 테스트 할 수 있습니다.

http://jsfiddle.net/F49b5/2/

 <html> 
     <head> 
      <style type="text/css"> 
       #logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on 
       { 
        background-image: url("http://i14.photobucket.com/albums/a332/007bond-jb/food/burger2.jpg"); 
        overflow: hidden; 
        background-repeat: no-repeat; /*this is the problem, remove it, it will work */ 
       } 
       #logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, .flag-off, .vote-accepted-off, .vote-accepted-on 
       { 
        font-size: 1px; 
        text-indent: -9999em; 
       } 

       #logo a 
       { 
        background-position: 0 194px; 
        width: 309px; 
        height: 133px; 
        display: block; 
       } 
      </style> 
     </head> 
     <body> 
      <div id="logo"> 
       <a href="/" title="test">test</a> 
      </div> 
     </body> 
     </html>

출처

2012-05-30 qinking126

스프 라이트에 대한 하이퍼 링크로 이것을 게시 할 수 있습니까? 두 개 이상의 요소에서 배경 위치를 보지 못해서 무슨 일이 벌어지고 있는지보기가 정말 어렵습니다. –

대신 194px의 -194px 위해 배경 위치 전환보십시오

#logo a 
{ 
    background-position: 0 -194px; 
    width: 309px; 
    height: 133px; 
    display: block; 
}

을 Y 축 설정함으로써 194px하기 위해서는 다운 194px를 배경 화상 밀어 것 귀하의 #logo 높이에서 벗어났습니다. 대신에 y 축을 음수로 설정하여 이미지를 "위로 당기"를 원할 것입니다.

출처

2012-05-30 15:49:33 sbeliv01

ye, 작동하지만 왜 -194px를 사용해야합니까? – qinking126

방금 설명을 편집했습니다. – sbeliv01

고마워요 – qinking126

상자 높이 이외의 배경 위치를 설정했습니다.

반복은 전체 이미지를 요소의 0 : 0에서 반복하여 표시합니다.

배경 위치를 제거하면 효과가 있습니다.

출처

2012-05-30 15:50:31 DickieBoy

여기 링크입니다 http://jsfiddle.net/F49b5/2/ – qinking126

배경 반복으로 CSS 스프라이트를 사용할 수 없습니다.

답변

관련 문제