Question

假设我使用定义多个属性的shorhand背景属性.eg：

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

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

Answer 1

只需覆盖您需要的属性即可。事实上，这种技术经常用于所谓的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文件会更小
它也很可读（没有人会猜到你是否因为错误而覆盖了一些先前的规则）。

覆盖速记背景属性的一个属性

1 个答案: