테이블 정렬 헤더에서 CSS 스프라이트를 사용하는 방법은 무엇입니까?

Question

테이블이 정렬됩니다. 헤더에는 정렬 방향을 나타내는 배경 이미지 (화살표)가 있습니다. JSfiddle here에

동작 예 :

는

현재 CSS 이런 3 개 가지 이미지를 사용한다.

하나의 이미지로 줄이고 CSS 스프라이트를 사용할 수 있습니까? 문제는 병합 된 이미지 을 헤더 셀의 배경으로 사용할 수 없다는 것입니다. 복수의 이미지가 동시에 표시 될 수 있기 때문입니다 (like here).

가능하면 추가 요소를 사용하지 않는 것이 좋습니다. IE7 지원은 훌륭하지만 아마 그것없이 살 수있을 것입니다.

:after과 같은 의사 요소가 작동 할 수 있지만 같은 방법으로 아이콘을 배치 할 수있는 방법을 찾을 수 없습니다. JSfiddle example.

Answer 1

의사 요소가 작동하는 방법을 알아 냈습니다. 그리고,

.sorting:before { 
    display: block; 
    content: ""; 
    position: absolute; 
    top: 50%; 
    right: 8px; 
    width: 7px; 
    height: 9px; 
    margin-top:-4px; 
    background: transparent url("http://i.imgur.com/iONZm.png") 0 0; 
} 

아이콘이 위로부터 50 %의 위치 몇 화소 중심을 수직 상방으로 이동이 다음과 같이, position: relative로 뭔가 테이블 헤더를 설정한다.

Answer 2

SpriteMe을 사용하면 사이트에 스프라이트 이미지를 생성 할 수 있습니다.

는

.sorting_asc { 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png); 
    background-position: 32px 0px; 
} 
.sorting { 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png); 
    background-position: 32px -27px; 
} 
.sorting_desc { 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png); 
    background-position: 32px -53px; 
} 

Answer 3

빠른 Google search for a CSS sprite generator은 몇 가지 옵션이 함께 제공됩니다. 필자는 이러한 서비스를 전혀 사용하지 않았지만 일반적으로 투명도가있는 단일 PNG 이미지를 만들었습니다. 그런 다음 CSS를 다음과 같이 참조하십시오.

th { 
    padding-right: 21px; 
    background: #EEEEEC url("table-sort.png") no-repeat center right; 
} 
th.sorting { 
    background-position: -100px -100px; 
} 
th.sorting_asc { 
    background-position: -200px -200px; 
} 
th.sorting_desc { 
    background-position: -300px -300px; 
} 

background-position 속성 값을 적절한 좌표로 바꿉니다. CSS 스프라이트 서비스는 한번 완료되면 압축을 기반으로 이러한 값을 생성 할 수 있다고 생각하지만, CSS 좌표는 원하는대로 정확하게 가져올 수있는 조정이 필요할 수 있습니다.