プロパティを使用してこれを実現できますがbackground-size
、背景画像が引き伸ばされるため、結果はあまりきれいではないかもしれません。
したがって、スプライトのサイズが正確に 13x5 のカードであることがわかっている場合はbackground-size: 1300% 500%
、背景自体がそれに応じて拡大縮小されるため、カードを与えて、好きなようにサイズを変更できます。
例
JSFiddle: http://jsfiddle.net/uLnzc/ .
HTML
<!-- Hearts --->
<div class="card card-hearts-2"></div>
<div class="card card-hearts-3 card-wide"></div>
<div class="card card-hearts-4 card-high"></div>
<!-- Clubs -->
<div class="card card-clubs-q"></div>
<div class="card card-clubs-k card-wide"></div>
<div class="card card-clubs-a card-high"></div>
CSS
.card {
width: 81px;
height: 117px;
background: url('http://i.stack.imgur.com/WZ9Od.gif') no-repeat;
background-size: 1300% 500%;
}
.card-wide {
width: 100px;
}
.card-high {
height: 130px;
}
/**
* Backgrouns position of all the cards
*
* x offset in %: i * (100/x); i = 0, 1, ..., (x - 1); x = the number of cols in the sprite
* y offset in %: j * (100/y); j = 0, 1, ..., (y - 1); y = the number of rows in the sprite
*/
.card-hearts-2 { background-position: 0 0; }
.card-hearts-3 { background-position: 8.33% 0; }
.card-hearts-4 { background-position: 16.667% 0; }
/* ... */
/* ... */
.card-clubs-q { background-position: 83.333% 50%; }
.card-clubs-k { background-position: 91.667% 50%; }
.card-clubs-a { background-position: 100% 50%; }
MDN で背景をパーセンテージでオフセットする方法について読むことができます。
JSFiddle: http://jsfiddle.net/uLnzc/ .