1

複数のプロパティを定義する省略形の背景プロパティを使用するとしましょう..例:

.img
{
    background: url('/Content/images/a.png') no-repeat scroll 100% 3px;  
}

画像の背景位置だけをオーバーライドしたい場合は、次のように更新された位置で完全な省略表記を使用する必要があります。

.img
{
  background: url('/Content/images/a.png') no-repeat scroll 0 3px;  
}

または、次のように background-position プロパティをオーバーライドします。

.img
{
   background-position: 0 3px;  
}

もしそうなら、問題は何ですか？位置をオーバーライドするだけでパフォーマンスがわずかに向上しますか?

4

1 に答える 1

4

必要なプロパティを上書きするだけです。実際、この手法は、いわゆるCSSスプライトで非​​常に頻繁に使用されます。

[class*=" icon-"] {
  background: url("../img/glyphicons-halflings.png") no-repeat scroll 14px;
}

.icon-glass {
  background-position: 0 0;
}

.icon-music {
  background-position: -24px 0;
}

.icon-search {
  background-position: -48px 0;
}

このアプローチ（最初に一般的な完全なルールを定義し、次に短縮ルールを使用して特定のクラスごとに指定する）には、2つの明らかな利点があります。

  • かなり短いので（... 1つのプロパティを更新して完全な定義を繰り返す場合よりも）、CSSファイルは小さくなります
  • また、非常に読みやすくなっています（以前のルールをエラーで上書きしたかどうかを推測する必要はありません）。
于 2012-09-09T08:05:46.377 に答える