CSS 스프라이트 작동하지 않음 - 설정

Question

에 표시 만 먼저 이미지

예, 여기에 있었다 : CSS Sprite not working

아니, 나는 그것을 얻지 않는다. 그는 '점'? 무엇을 의미 하는가

즉

"각각의 ID 값에 대한

, 각 클래스 값에 대해 100 점을 를 적용 (또는 의사 - 클래스 나 속성 셀렉터), 10 점 을 적용 각 요소 참조에 대해 1 점 적용 "

이러한 '포인트'는 무엇입니까? 기사를 읽었을 때 CSS 코드를 지정하는 순서가 있지만 이해가되지 않습니다. 바로 이것이 세트에서 가장 첫 번째 스프라이트를 얻는 것입니다. 참고로 스프라이트 생성기를 사용했습니다. (This one to be exact)

소스 코드 here을 볼 수 있습니다. 모든 것을 제대로 보려면 브라우저를 확대하는 것이 좋습니다.

Answer 1

리키 : img 태그가 배경을 가리고 있습니다. div로 변경하는 것이 좋습니다. 또한 코드에 NOS 객체를 포함시키지 않았습니다. 여기에 내가 생각해 낸 점이있다 :

<script> 
    var NOS = { 
     itemno: 0, 
     menuClasses: [ 
      'img-blog', 
      'img-files', 
      'img-forums', 
      'img-login', 
      'img-logout', 
      'img-mail', 
      'img-news', 
      'img-profile', 
      'img-reg', 
      'img-settings', 
      'img-shop', 
      'img-status' 
     ], 
     toggle: function() { 
      $('#menuimg').removeAttr('class').addClass(function() { 
       ++NOS.itemno; 
       if (NOS.itemno > NOS.menuClasses.length - 1) { 
        NOS.itemno = 0; 
       } 
       return NOS.menuClasses[NOS.itemno]; 
      }); 
     } 
    } 
</script>