CSS 스프라이트에 대한 배경 위치가 작동하지 않습니다.

"배경 위치"CSS를 사용하여 이미지의 특정 부분을 타겟팅 할 수 없으며 위치를 설정하고로드 할 이미지를 모두 가져올 수 있지만 지정된 영역은 가져올 수 있습니다. 표시되지 않습니다. 나는 아무 소용 지금까지이 코드를 작성했습니다 :CSS 스프라이트에 대한 배경 위치가 작동하지 않습니다.

<head> 

<style type="text/css"> 

ul#links { 
    list-style: none; 
} 

ul#links li a{ 
    float: left; 
    padding: 40px; 
    background: url('http://static.tumblr.com/wgijwsy/ixYlr91ax/sprite_colored.png') no-repeat; 
} 

#customlink { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -0px ; 
    background-repeat: no-repeat; 
} 

#rss { 
    width: 24px; 
    height: 24px; 
    background-position: -24px -0px; 
    background-repeat:no-repeat; 
} 

#facebook { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -24px; 
    background-repeat:no-repeat; 
} 

#flickr { 
    width: 24px; 
    height: 24px; 
    background-position: -24px -24px; 
    background-repeat:no-repeat; 
} 

#twitter { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -48px; 
    background-repeat:no-repeat; 
} 

#linkedin { 
    width: 24px; 
    height: 24px; 
    background-position: -24px -48px; 
    background-repeat:no-repeat; 
} 

#google { 
    width: 24px; 
    height: 24px; 
    background-position: -0px -72px; 
    background-repeat:no-repeat; 
} 

#foursquare { 
    width: 24px; 
    height: 24px; 
    background-position: -72px -0px; 
    background-repeat:no-repeat; 
} 

</style> 

</head> 

<body> 
    <ul id="links"> 
    <h2>Social Networks</h2> 
    <li><a href="" id="customlink"></a></li> 
    <li><a href="" id="rss"></a></li> 
    <li><a href=""id="facebook"></a></li> 
    <li><a href=""id="flickr"></a></li> 
    <li><a href="" id="twitter"></a></li> 
    <li><a href="" id="linkedin"></a></li> 
    <li><a href=""id="google"></a></li> 
    <li><a href=""id="foursquare"></li> 
    </ul> 

</body> 
</html>

출처

2011-09-09 Jose Handras

때문에 예를 #facebook보다 more specific되는 ul#links li a에, ul#links li a 내부 background 규칙이 #facebook에 background-position을 무시한다.

ul#links li a{ 
    float: left; 
    background-image: url('http://static.tumblr.com/wgijwsy/ixYlr91ax/sprite_colored.png'); 
    background-repeat: no-repeat; 
    width: 24px; 
    height: 24px; 
} 
#facebook { 
    background-position: -0px -24px; 
}

출처

2011-09-09 10:39:18 thirtydot