0

Firefoxで背景画像を表示するのにいくつか問題があったので、それを機能させましたが、CSSがどれほど肥大化したかに驚いていました。今ではうまく機能しますが、複数の画像のベースCSSコードを複製する必要があります。

CSSクラスを最適化し、コードの量を最小限に抑えることが可能かどうか誰かに教えてもらえますか？すでに使用されているIDを利用できず、class ='imga p0'が機能しません（p0は背景位置を保持し、各画像位置に対してp1、p2、p3 ..になります）。

アドバイスをよろしくお願いします。

a.imga0 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-288px 0;} /* tick green */
a.imga1 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-312px 0;} /* cross grey */
a.imga2 { .....  and so on.
4

2 に答える 2

1

編集：したがって、これは繰り返しを排除する必要があります

/* template */
a.imag0, a.imag1, a.imag2 {
    display: block;
    width: 24px;
    height: 24px;
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
}

/* specifications */
a.imag0 {
    background-position:-288px 0;
}
a.imag1 {
    background-position:-312px 0;
}

1つは、一般的なセレクターを作成できます

a {
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
    display: block;
}

これは、スプライト画像などの一般的なスタイルを適用します。

別のクラスを作成することもできます（スペースを使用してさらにクラスを指定します）

たとえば、

<a class="imag0 spriteclass">something</a>
<a class="imag1 spriteclass">something</a>
<a class="imag2 spriteclass">something</a>

と

a.spriteclass {
    //again the template, such as the sprite and display type and width
}

2番目のオプションは、cssを適用するセレクターをリストすることです。

a.imag0, a.imag1, a.imag2... {
    // your general css
}

そして、上記のように、特定のスプライトの位置と詳細を個別に指定します

于 2012-05-02T03:38:48.110 に答える
0

誰かが後でこの投稿を参照する場合に備えて、これを追加します。

以下のツールを使用して、最も最適化されたCSSを生成できます。 http://www.spritecss.com/

于 2017-03-23T05:18:28.733 に答える