1

background-positionスプライト アイコンの位置について、 私のサイトのソース コードを 19 文字のバイトを浪費する文字と混ぜ合わせて見てください。

background-position

単独で使用するのは問題ありませんが、何百ものスプライト アイコンを設定すると、ばかげたバイト浪費になります。だから私の質問は:この長い単語を置き換えることができるよりスマートな省略形はありますか? もしそうなら、それは私のページの半分のバイトを節約するでしょう!

下の写真でその狂気を見てください...

乾杯、そして大歓迎です！

アップデート：

すべてのアイコンには、独自の一意のアイコンと一意の背景オフセットがあることに注意してください。

ここに画像の説明を入力

4

2 に答える 2

1

を使用すると、実際の背景画像が上書きbackgroundされるように見えるので、唯一の賭けのように見えます。background-position

それでも、代わりにクラスを使用できます。例...

HTML

<div class="sprite-button save">Save</div>

CSS

.sprite-button {
   width: 10px;
   height: 10px;
   background-image: url(sprites.png);
   background-repeat: no-repeat;
   text-indent: -9999px;
}

.save {
   background-position: -30px 0; 
}

それでも、あなたがGoogleやFacebookなどでない限り、これだけのバイト数を節約することはおそらく問題の価値がありません（上記の私の例を超えて）。

于 2011-02-24T23:58:42.153 に答える
1

アプローチは、クラス名の背景位置をエンコードし、javascript を使用してこれを要素のスタイリングに変換することです。

そう

 <p class="mnu" style="background-position: 0 -1690px">

になる

 <p class="mnu bg p$0$-1690">

次に、次のようなことをします

$('.bg').each( function() {
  var elem = $(this);
  var classes = elem.attr('class').split(/\s+/);
  $.each(classes, function(index, classname) {
    if(classname.indexOf('p$') != -1) {
      var coords = new Array();
      coords = classname.split('$');

      elem.css('background-position', coords[1]+"px "+coords[2]+"px");
    }
  });
});

事実上、あなたはそこにあなた自身の非縮小者を持っています。これが最善の方法だと言っているわけではありませんが、HTML ファイルのサイズに関する懸念には対処できます (レンダリング時間が長くなります)。

于 2011-02-25T00:53:28.627 に答える