0

スプライトの使い方を勉強中です。次のコードがありました。

<div class="jumbotron">
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
</div>

次のCSSを使用：

.jumbotron {
  background: url("../img/lsm1280.jpg");
  padding: 1em;
  height: 12.5em;
  width: 42em;
  margin-top: 2em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

CSSスプライトを使用しようとしています。そこで、 http ://spritegen.website-performance.org/ を使用して png ファイルを生成しました。

そして、CSS コードを次のように変更しました。

.jumbotron {
  background: url("../img/csg-5267d2af270ac.png") no-repeat top left;
  padding: 1em;

  height: 12.5em;
  width: 42em;
  margin-top: 2em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

そして、HTMLコードを次のように変更しようとしています:

       <head> .... stuff
       <style>
          .sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; } "
       </style>
      </head>
          <div class="jumbotron">
            <img class="sprite-lsm1280"/>
          </div>

次の投稿のコメントを確認しています: CSS スプライトを動作させることができません..何が間違っているのでしょうか?

私は間違っていることを確認するために各回答を調べています..しかし、まだ見つけていません。任意の提案をいただければ幸いです。

ありがとう。

編集1

ブラウザーで開発者ツールをいじっていると、画像が読み込まれていることがわかりますが、これは間違った画像です! コンテナの高さ/幅のプロパティのサイズを変更してきましたが、それが画像が読み込まれていると判断した方法です...しかし、正しいものではありません。

オンライン ツールを使用して css スプライトを生成すると、以下のクラスを含む一連のクラスが作成されました。

  .sprite-lsm1280{ background-position: -7036px -1625px; width: 780px; height: 248px; }

それが、イメージタグで使用しようとしてきた css です。しかし、背景の位置が間違っているようです...これを修正する方法がわかりません/そうであることを証明するためのテスト...ありがとう。

4

1 に答える 1