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

I want to let the background-image have an opacity: 1 (opaque) at the top red bar and opacity: 0.9 (transparent) at the rest part down below.

for now it is:

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 says opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

CodePudding user response：

To have translucency on everything except the red banner, you could apply your 0.9 opacity only to the direct children of your body and not your body itself. And then override the banner's opacity to full. I would have to see your markup to guarantee this working but you can give it a go:

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