스프라이트 배경 이미지를 사용하여 요소에 한 번 표시 (반복 없음)하는 방법은 무엇입니까?

Question

다른 플러그인 (jquery.tablesorter.js)에 의해 추가 된 다른 클래스에 jQuery 아이콘을 추가하고 싶습니다. ui-icon-triangle-1-n 아이콘을 에서 .headerSortUp 클래스에 추가하고 싶습니다.

다음 클래스를 추가하려고하지만 내 인생에서 스프라이트를 해결하는 방법은 없습니다.

table.sortable thead tr .headerSortUp { 
    cursor: pointer; 
    background-position: center right; 
    background-repeat: no-repeat; 
    background-size: 16px 16px; 
    background: url(jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png) 0 -16px; 
} 

저는 CSS 스프라이트를 사용하기 전에이 작업을 수행하는 방법을 잘 모릅니다.

내가 보는 상황은 배경 이미지의 일부만 나타나기를 바라지 만, 텍스트의 오른쪽 가운데에 배치하고 반복하지 않기를 원합니다.

Answer 1

여기에 스프라이트에 대한 배경 이미지 작물에 훌륭한 튜토리얼이있다 : 이 css-background-image-hacks

트릭이 필요없이 헤더에 아이콘을 배치 할 의사 선택기 :after 또는 :before를 사용하는이 html 구조에 추가 요소를 추가합니다. http://jsfiddle.net/FXq8b/

.tablesorter thead tr { 
    line-height:16px; 
    background-color:#ddd; 
    cursor: pointer; 
} 
.headerSortUp:after, .headerSortDown:after { 
    content:""; 
    float:right; 
    width:16px; 
    height:16px; 
    margin:0 5px 0 0; 
    background:url('http://www.wooldalejunior.org.uk/ui/vendor/jquery.ui/css/smoothness/images/ui-icons_222222_256x240.png'); 
    background-position:0 -16px; 
} 
.headerSortDown:after { 
    background-position:-64px -16px; 
} 

는 이제 또 다른 예를 들어 (원하는 아이콘에 도달하기 위해 X 16px 왼쪽으로까지 많은 시간을 이동해야합니다

그리고 여기가 내가 tablesorter에 플러그인을 사용하여 작업 데모를 추가 ... 위로 ->background-position: 0 -48px; 아래쪽 ->background-position: -64px -48px ... 또는 위로 ->background-position: -96px -192px; 아래 ->background-position: -64px -192px, 원하는 아이콘이 이미지 위에 놓여있는 상단 및 왼쪽 가장자리에서 얼마나 많은 아이콘을 카운트해야합니다 : http://jsfiddle.net/FXq8b/1/).

Answer 2

당신은 상자를 만들고이 상자에 이미지를 넣어 : 당신은 X와 Y 좌표하여 스프라이트 내부 이동

table.sortable thead tr .headerSortUp, 
table.sortable thead tr .headerSortDown { 
    background: url("http://code.jquery.com/ui/1.10.2/themes/smoothness/images/ui-icons_454545_256x240.png") no-repeat; 
    display: inline-block; /* or block */ 
    height: 14px; 
    width: 14px; 
} 
table.sortable thead tr .headerSortUp { 
    background-position: 0 -46px; 
} 
table.sortable thead tr .headerSortDown { 
    background-position: -65px -46px; 
} 

background-position으로.

예 : http://jsfiddle.net/865VD/