0

ここ数日、このトピックについて多くのことを読みましたが、解決策が見つかりませんでした。私は 2 つのスプライト セットを持っています。1 つは通常のディスプレイ用の低品質のもので、もう 1 つは Retina ディスプレイ用の高品質のものです。

私の問題は、サイトがレスポンシブでなければならず、ブラウザー ウィンドウに応じてグラフィックのサイズを変更する必要があることです。しかし、background-sizeプロパティでは、ブラウザにスプライトのサイズを変更するように指示できないようです。これが私がこれまでに得たものです：

#logo-img {
  max-width: 100%;
  text-indent: -9999px;
  height: 85px;
  width: 360px;
  background-image: url('/images/sprites-sa026cef942.png');
  background-position: 0 -2609px;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
    #logo-img {
      background-image: url('/images/sprites-retina-se61e802cf4.png');
      background-position: 0 -2601px;
      -webkit-background-size: 360px, auto;
      -moz-background-size: 360px, auto;
      -o-background-size: 360px, auto;
      background-size: 360px, auto;
    }
}

HTMLは

<a href="#" id="logo-img">
  <h1>My logo text</h1>
</a>

モバイル デバイスを除き、またはブラウザ ウィンドウのサイズを変更する場合を除いて、すべて正常に動作します。ロゴが切り取られ、ブラウザ ウィンドウに合わせてサイズ変更されません。max-width: 100%;私はandで遊んでいましheight: auto;たが、これはアウトラインにのみ影響し、内部のスプライトには影響しません。

誰かが解決策を知っていることを願っています。IE8 互換である必要はありませんが、あると便利です ;)

EDIT スプライトを使用background-size: contain;する前に、背景画像が要素のサイズにサイズ変更されることを確認していました:

#logo-img {
  background:url(../images/sprites-retina/logo.png) no-repeat center center;
  background-size: contain;
  max-width: 100%;
  text-indent:-9999px;
  height: 85px;
  width: 360px;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}

これはうまくいきましたが、スプライトシートを使用できません。多分それは私が言いたいことを明確にします。

EDIT2

私はフィドルを作りましたhttp://jsfiddle.net/euvRD/2/

4

1 に答える 1

3

行からカンマを削除する必要があると思います。background-size高さを次のように設定すること85pxもできます。

-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;

しかし、コンマがここでの主な問題だと思います。それはあなたを助けましたか？

于 2012-09-26T09:56:43.447 に答える