css - 将背景图像属性合并到单个 CSS 规则中但不指定背景颜色？

Question

我希望具有类的元素始终具有相同的背景颜色。根据天气，它有一个额外的类，它的背景图像会改变。

这很好用，但是必须为不同的背景属性制定单独的规则有点困惑:

.class { 
  background-color: grey;
  background-image: url("image1.jpg");
  background-repeat: no-repeat;
  background-position: right center;
}

.class.additional { 
  background-image:  url("image2.jpg"); 
}

这行得通，但我不得不重复“灰色”，这对于长期维护代码来说并不理想:

.class {
  background: grey url("image1.jpg") no-repeat right center;
}

.class.additional {
  background: grey url("image2.jpg") no-repeat right center;
}

有没有一种方法可以将所有背景属性写在一行中，而不是为两种样式重复背景颜色？

Answer 1

您可以在第一条规则中指定简写，而在第二条规则中仅覆盖 background-image:

.class { 
  background: grey url("image1.jpg") no-repeat right center;
}

.class.additional { 
  background-image: url("image2.jpg"); 
}