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;  
}

或者只是覆盖背景位置属性，如：

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

如果是这样，有什么问题？仅覆盖该位置是否有轻微的性能提升？

4

1 回答 1

4

只需覆盖您需要的属性。事实上，这种技术在所谓的 CSS Sprites 中经常使用：

[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;
}

这种方法（您首先定义一个通用的完整规则，然后使用速记规则为每个特定类指定它）有两个明显的优点：

  • 它要短得多（...比您重复完整定义并更新一个属性时），因此 CSS 文件会更小
  • 它也非常易读（没有人会猜测您是否错误地覆盖了某些先前的规则）。
于 2012-09-09T08:05:46.377 回答