CSS : CSS 의사 클래스로 이미지 스프라이트 사용하기 : 이전 및 이후

Question

나는 결코 전에 그것을 시도하지 않았습니다. 두 개의 아이콘이 포함 된 이미지 스프라이트를 만들었습니다. 각 아이콘의 너비는 26px이며 높습니다. 따라서 스프라이트는 26x52 픽셀입니다.

div.something 또는 div.anything에있는 요소가 있습니다. 클래스에 따라 왼쪽 또는 오른쪽에 모서리 뚜껑을 추가하고 싶습니다.

그래서 나는 .element 상대 위치를 지정하고 있습니다. :before pseudoclass를 img에 적용하고 높이와 너비를 26px로 지정하여 스프라이트의 하나의 아이콘 만 맞 춥니 다. "오버플로 : 숨겨진 "스프라이트에 두 번째 아이콘을 숨기려면.

.element { 
    position:relative; 
} 

.element:before{ 
    content: url("../images/sprite.png"); 
    position: absolute; 
    height:26px; 
    width:26px; 
    overflow:hidden; 
} 

.something .element:before { 
    top: -2px; 
    left: -2px; 
} 

anything .element:before { 
    top: -28px; 
    right: -2px; 
} 

스프라이트에서 첫 번째 맨 위 아이콘을 사용하는 왼쪽 모서리에서 정상적으로 작동합니다. 그러나 이제는 "anything .element"에 대한 스프라이트의 두 번째 아이콘 만 표시 할 수 있습니다.

실제로 "마스크"는 -2px, -2px에 있어야하지만 스프라이트 img 내부는 -26px에서 시작해야 두 번째 아이콘이 표시됩니다.

내가 지금하고있는 것처럼 CSS로 가능합니까?

Answer 1

위치를 수정할 수 없기 때문에 content을 사용하여 이미지를 삽입하지 마십시오. 대신 내용을 " "으로 설정하고 스프라이트를 배경 이미지로 추가하십시오. 그런 다음 background-position 속성을 사용하여 스프라이트를 올바른 위치로 이동할 수 있습니다. 그렇지 않으면 예제가 정상적으로 작동해야합니다.

실제로 동작하는 데모 : 대한

http://jsfiddle.net/RvRxY/1/

Answer 2

지원 : 및 이전 : 모든 대부분의 브라우저에 존재하지 않는 경우 IMG 태그에 대한 의사 요소 후, 제한된다.

가장 좋은 해결책은 img를 div 안에 넣은 다음 img가 아닌 실제 div에 클래스를 적용하는 것입니다.

의사 요소의 사용법은 거의 정확합니다. 시도해 볼 수 있습니다.

.somediv { position:relative;} 

.somediv:before { 
    position: absolute; 
    content: ''; 
    height: 26px; 
    width: 26px; 
    top: 0; 
} 

.somediv.foo1:before { 
    background: url("../images/sprite.png") no-repeat -2px -2px; 
    left: 0; 
} 

.somediv.foo2:before { 
    background: url("../images/sprite.png") no-repeat -2px -28px; 
    right: 0; 
} 

백그라운드를 사용하십시오. 속성보다는 내용 :; 속성을 사용하여 스프라이트를 : before 의사 요소 내에 배치 할 수 있습니다.

왼쪽 :; 권리:; 및 상단 :; 부모 (.somediv)를 기준으로 의사 요소의 절대 위치 지정에 사용해야합니다.

당신의 의사 요소 주위에 1 픽셀의 경계를 배치하면 다른 위치 :