html - 背景大小设置不能与背景图像分离吗？

Question

为了减小我的 CSS 文件的大小，我想分解一些命令，例如 background-size。假设我有很多这样的部分:

#interlude {
  background: url(https://.../unsplash.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

正在使用中:

<div id="interlude"></div>

如果我有许多不同的“插曲”div，CSS 中所有与尺寸相关的行都会重复。我想要这样的东西:

#interlude {
  background: url(https://.../unsplash.jpg) no-repeat center fixed;
}
.bw-back-cover {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在这种情况下，bw-back-cover 类只声明一次。但它不起作用，我不知道这是否是正常行为。

两种情况都在 Codepen

Answer 1

对于您的 CodePen，简写 background属性覆盖所有 背景相关属性，而不仅仅是指定的属性 - 所以 background-size被忽略，因为 background具有更高的优先级(在 ID 上而不是在类上)。

有两种方法可以解决这个问题。

1) 简单的方法是添加!important到 background-size 的每一行属性，因此它们不会被 background 覆盖速记。 (但是，我建议使用下面的第二种解决方案，因为 !important 在需要时很难覆盖。)代码:

.bw-back-cover {
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

2) 更简洁的解决方法是拆分背景属性而不是使用速记，因此 background-size没有被覆盖。代码:

#interlude {
  background-image: url(https://.../unsplash.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}