15

私は 91 * 91 ピクセルの 62 枚の画像のスプライトを持っています。これにより、全体が 91 * 5642 ピクセルになります。それらは、ユーザー/ポインターの動きに応じて拡大および縮小する一種の動的グリッドで表示されます。要素 (std 91 * 91 px) がズームインして 120 * 120 px になることがあります。明らかに、91 * 91 px の画像全体が 120 * 120 要素全体に表示されるように、背景を拡大したいと考えています。

background-size: 100% auto幅を常に完璧にするために入力します。問題は、background-positionその値も更新されることを期待していることです! 62 要素すべてに inline がありstyle=background-position etcます。インラインから背景位置を更新できません。背景を最初に配置してからサイズ変更（ズーム）し、サイズ変更してから配置（間違った位置にズーム）するのではありません。

私が意味を成しているのかどうかはわかりません。やや明確にするために：

  • すべての要素のスタイルはwidth: 91px; height: 91px; background-size: 100% auto;.
  • 2 番目のイメージのインライン スタイルはbackground-position: 0 -91px.
  • その要素にカーソルを合わせると、スタイルが取得さwidth: 120px; height: 120px;れ、サイズ変更後に配置が行われるため、2 番目の画像の大部分と 1 番目の画像の一部が表示されます =(
  • background-position (ズーム/ホバー後) を に変更すると0 -120px、正しく配置されます。（しかし、ズーム/ホバリングしていないときは明らかに間違っています。）

非常に簡単な解決策は、実際のzoom: 1.3またはを使用することtransform: scale(1.3)ですが、それはトランジションで非常に遅くなります。

私は何かが欠けているに違いない。CSS はこれよりも賢くなければなりません。背景サイズのスプライト… ありえないじゃないですか!?

スプライトがどのように見えるかは私次第なので、91 * 91 の代わりに 120 * 120 グリッドにすることもできます。

編集:フィドルの例: http://jsfiddle.net/rudiedirkx/g4RQx/

スマートな答え 1: background-position: 0 calc(100% / 61 * 2) (62 枚の画像から 61、3 枚目の画像から 2)

4

6 に答える 6

14

それは実際には非常に簡単です。パーセンテージの位置を使用するだけです。

background-position: 0 3.28%;

http://jsfiddle.net/g4RQx/18/

于 2013-09-02T17:28:36.310 に答える
5

ホバー状態で、スケール比に従って背景位置を編集します

a:hover {
    width: 120px;
    height: 120px;
    background-position: 0 -240px; /* -182px * 1.3186... */
}

フィドル

記録のために: あなたの質問では、スケールが遅いと述べました。スケールを使用してみましたが、遅い遷移は見られませんでした:

a:hover {
    transform: scale(1.3);
    transform-origin: 0 0;
    transition: all .5s;
}

フィドル

于 2013-09-01T08:37:26.627 に答える
3

要件がこれよりもスムーズな移行である場合は、これが必要です。

デモ

中央ズームの DEMO2。

HTML:

 Hover image large transition<br>
    Hover that:<br>
    
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>

CSS:

 p {
    margin: 0;
    display: inline-block;
    
}
a {
    display: block;
    border: solid 10px green;
    /* always: */
    width: 91px;
    height: 91px;
    background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;

    /* inline: */
    background-position: 0 -182px;
     -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
a:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

フィドル：フィドル

于 2013-09-06T07:17:39.297 に答える
-1

答えは簡単だと思いますが、

を更新しましたfiddle。

これをチェックしてください、

このようにスタイルを指定すると、問題は簡単に解決するはずです...

a {
 display: block; /* always: */
 width: 91px;
 height: 91px;
 background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
 background-size: 100% auto;
 /* inline: */
 background-position: 0% 3.30%; /* this will do the trick */ 
}
a:hover {
 width: 150px;
 height: 150px;
}

気になるので回答お願いします...

于 2013-09-03T06:39:56.257 に答える
-1

回答の多くは、背景位置の静的ピクセルではなくパーセンテージを示唆していますが、私は別のアプローチを取っています。それは少し奇妙です...しかし、それはうまくいきます！<-- フィドル

だから私はそれに添付された背景を持つあなたのリンク内にスパンを追加しました。そして、インラインの背景位置の代わりに、次のようにスパンの高さをパーセントで使用します。

<a href="#">
    <span style="height: 100%"></span>
</a>

そして、この css があれば、必要なものはすべて揃っており、残りはイメージによって修正されます。

a {
    display: block;
    overflow: hidden;
    width: 91px;
    height: 91px;
    position: relative;
}
a span{
    background: url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;
    background-position: 0 0;
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
}
a:hover {
    width: 120px;
    height: 120px;
}

これは、他のソリューションを使用しない場合に必要な html と css の数ですが、何かを解決する方法が多ければ多いほどよい :)

于 2013-09-03T14:47:49.363 に答える