14

カードゲームを作っています。カードのスプライト画像があります。スプライトで言うと、各カードは幅 50 ピクセル、高さ 80 ピクセルです。 ここに画像の説明を入力 これで、これらのカードを配置したい div がいくつかできました。 ここに画像の説明を入力

Div が幅 100 ピクセル、高さ 160 ピクセルであるとします。

以下のように、最初の画像を Div のスプライトとして使用しています。

background: url(../images/poker_sprite.gif) no-repeat scroll 0 0 transparent ;

異なる div が diff カードを取得するように、x と y の位置を変更します。

背景画像を Div に合わせるには、どの CSS プロパティを使用すればよいですか? Sprites または Div のサイズを変更することはできません。

次に、これらのカードをドラッグして、以下の 1 ～ 13 とマークされているスロットに配置します。 ここに画像の説明を入力

したがって、カードの div は幅が可変になります。背景画像は、可変幅の div に収まるようにサイズ変更する必要があります。これを行うにはどうすればよいですか？さまざまなサイズの複数のスプライトを使用する必要がありますか?

ありがとう ！

4

7 に答える 7

20

プロパティを使用してこれを実現できますが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/ .

于 2013-08-29T01:35:09.203 に答える
2

こんにちは、これはあなたが求めていることを行う最も簡単な方法です!

CSS -

.smking,.king{
position: relative;
background-image: url(http://i.stack.imgur.com/WZ9Od.gif);
background-size: 1300% 500%;
}

.king{
width: 50px;
height: 80px;
background-position: 100px 0px;
}

.smking{
width: 30px;
height: 50px;
background-position:  60px 0px;
}

HTML -

<div class="king"></div>
<div class="smking"></div>

これにより、画像が一度読み込まれ、サイズ変更できるように設定されます。

http://jsfiddle.net/j3xXe/10/

よろしく

アルファヌ

于 2013-12-11T05:24:36.450 に答える
0

Alexander Wallinの答えは素晴らしいです！しかし、パーセンテージ オフセットを計算するための式には小さなエラーがあると思います。100 を x で割った場合、(x-1) で割る必要があります。

/**
 * Background position of all the cards
 *
 * x offset in %: i * (100/(x-1); i = 0, 1, ..., (x - 1); x = the number of cols in the sprite
 * y offset in %: j * (100/(y-1); j = 0, 1, ..., (y - 1); y = the number of rows in the sprite
 */

PS: このコメントを回答として作成して申し訳ありません。コメントするのに必要なクレジットがありません。

于 2016-03-16T08:33:47.613 に答える