让背景图像在顶部的红色条不透明，在下面的其余部分透明

Question

我想让背景图像在顶部的红色条上有一个 opacity: 1（不透明），在下面的其余部分有一个 opacity: 0.9（透明）。

现在是：

body {
    font-family: sans-serif;
    background-image: url("./LoveLive-SuperStar.png");
    opacity: 0.9;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 0;
}

.head {
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #94070A;
    text-align: center;
    color: #FFFFFF;
}

MDN 表示 opacity 应用于整个元素，包括其内容，即使该值未被子元素继承。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们相对于彼此具有不同的不透明度。

Answer 1

要使除红色横幅以外的所有内容都具有半透明性，您可以将 0.9 的不透明度仅应用于 body 的直接 children 而不是 body 本身。然后将横幅的不透明度覆盖为完全。我必须查看您的标记才能保证此功能正常运行，但您可以试一试：

body {
  font-family: sans-serif;
  background-image: url("./LoveLive-SuperStar.png");
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: 0;
}
body > * {
  opacity: 0.9;
}

.head {
  opacity: 1;
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #94070A;
  text-align: center;
  color: #FFFFFF;
}

让背景图像在顶部的红色条不透明，在下面的其余部分透明

let the background-image opaque at the top red bar and transparent at the rest part down below

css

background-image

opacity