2

作業中の Web ページのスプライトを作成するためにCSS スプライト ジェネレーターを使用していますが、動作していないようで、理由がわかりません... 明らかなことだと思いますが..!

そこで、3 つの画像を取得し、zip 圧縮し、PNG ファイルを生成しました (結果を確認したところ、問題ないようです)。次の css クラスが返されました。

.sprite-welcom1 { background-position: 0 -30px; } 
.sprite-welcom3 { background-position: 0 -109px; } 
.sprite-3 { background-position: 0 -188px; } 

ここに私がテストしている HTML がありますが、何らかの理由で空白のページしか表示されません。

<html>
<head>
    <style>
    .sprite-welcom1 { background-position: 0 -30px; } 
    .sprite-welcom3 { background-position: 0 -109px; } 
    .sprite-3 { background-position: 0 -188px; } 

    .sprite-bg {
       background: url(csg-495a902b04181.png) no-repeat top left;
    }
    </style>
</head>
<body>
    <div class="sprite-bg sprite-3"></div>
</body>
</html>

任意のヒント?

4

8 に答える 8

8

発電機を使用しないでください。時間をかけて自分で最初からやり直してください。そうすれば、次にこの方法を使用するときに、何か問題が発生したときに何を探すべきかがわかります。また、自分の質問に答えることができます。

このジェネレーターは、スタイルに意味のあるクラス名を生成しません。つまり、後でそれらを編集する場合、番号を覚えていない限り、火曜日の 2 つのクラスで何が起こっているのかを知ることはできません。意味のある名前は、後でスタイルシートに戻ったときに頭痛の種から解放されます。

Photoshop、GIMP、またはほとんどすべての最新の画像編集ソフトウェアを開きます。プログラムでルーラー オプションがオンになっていることを確認し、この方法で要素の背景画像座標を測定します。定規がない場合 (これはおそらくまれなことですが)、MeasureIt Firefox 拡張機能とタブで開いた .png をいつでもごまかすことができます。

于 2009-01-02T12:36:11.790 に答える
4

の幅と高さを定義し<div class="sprite-bg sprite-3">ます。

于 2008-12-30T21:52:53.517 に答える
3

(パーツ) の複合.sprite-bgルールbackground-positionの一部として設定された のルールは、スタイルシートの後半に表示されるため、スタンドアロンの設定よりも優先されます。backgroundtop leftbackground-position.sprite-3

ルールを.sprite-bg最初に配置します。

于 2008-12-30T21:49:39.220 に答える
2

divは空です。中に何かを入れてください。スペースのように(&nbsp;)。

于 2008-12-30T21:54:26.167 に答える
2

height要素に対してandwidthを宣言する必要がありdivます。それでおしまい。

于 2011-07-20T21:34:18.120 に答える
1

うーん、ここで何を達成しようとしているのかよくわかりません。マルチクラス化は少し面倒です。スプライトマップの方法を以下に投稿しました。これが必要なことをするかどうかを確認してください。通常、これには要素の組み合わせが含まれます。最も一般的なのは、ナビゲーション用のリンクを含む順序付けられていないリストですが、この目的では単なる div です。

また、background-position の順序も忘れないでください。背景位置: |トップ| |左|;

それは私を数回台無しにしました。最後に、A List Apart にはスプライト マップに関する優れた記事があります ( http://www.alistapart.com/articles/sprites/ ) 。

<html>
<head>
    <style>
    .sprite-container div {
       background: url(csg-495a902b04181.png) top left no-repeat;
       width: 20px; //width is neccessary
       height: 20px; //height is neccessary
    }

    .sprite-3 { background-position: 0 -188px; } 
    .sprite-4 { background-position: -20px -188px; }

    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div>
      <div class="sprite-4"></div>
    </div>
</body>
</html>
于 2008-12-30T22:51:03.010 に答える
0

何らかの理由で、Firefox 3 では、スプライト マップを機能させるために、CSS セレクターで 2 つのクラスが必要になることがあります。私の推測では、スプライト マップのロード中に特異性のルールが問題を引き起こしているようです。追加のクラスを追加することで、正しく動作します。

/* Bad  */ .childClass2 { background-position: -10px -20px; }
/* Good */ .parentClass1 .childClass2 { background-position: -10px -20px; }

DOM タグを別の場所で予期せずスタイリングすることを避けるために、parentClass を使用して CSS を「名前空間」にすることは常に良いことです。ここでは、上記のすべてのアイデアに対する追加の拡張機能をいくつか紹介します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    .sprite-container div {
       background: transparent url(//www.yourDomain.com/csg-495a902b04181.png) no-repeat scroll 0 0;
       width: 200px; /* width is necessary */
       height: 20px; /* height is necessary */
    }
    .sprite-container .sprite-3 { background-position: 0 -188px; } 
    .sprite-container .sprite-4 { background-position: -20px -188px; }
    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div> 
      <div class="sprite-4"></div> 
      <!-- Empty divs are fine! Unless you *really* want text on top of
           your sprite map. :o) Btw: &shy; is invisible when a hyperlink
           is wrapped around it. &nbsp is not... it creates an 
           underscored hyperlink. Use &shy; which is a soft-hyphen.
       -->
    </div>
</body>
</html>

このコードは、IE 7、Firefox 3、Google Chrome 1、Opera 9、Safari 3 で動作します。

ヒント: URL で http:// を避けると、http:// 接続と https:// 接続の両方からスプライト マップを提供できるようになります。

(右にスクロールすると「no-repeat scroll 0 0;」が表示されます)

于 2009-02-06T09:28:33.843 に答える
0

他の人が述べたように、 sprite-bg 要素には、高さ/幅を与えるためのコンテンツが必要であるか、css でこれらのプロパティが指定されている必要があります。

.sprite-bg {
  background: url(csg-495a902b04181.png) no-repeat top left;
  width: 100px; /* (or whatever the width should be) */
  height: 100px; /* (or whatever the height should be) */
}

他の誰かが述べたように、.sprite-welcom1、.sprite-welcom3、および .sprite-3 のルールを、スタイルシートのメインの .sprite-bg の下に移動します。

于 2009-01-20T17:15:06.393 に答える