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

Question

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.

Can you provide a snippet with the markup and all the styles — Zach Jensz, Apr 02 '22 at 04:03
Struggling to understand what you want. You want translucency on everything except the red banner? — Zach Jensz, Apr 02 '22 at 04:08
Yes, I want translucency on everything except the red banner — , Apr 02 '22 at 04:08
It would really help if you provided the markup and any other styles you might have — Zach Jensz, Apr 02 '22 at 04:12

score 0 · Accepted Answer · answered Apr 02 '22 at 04:10

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

I am glad that it works! I learned the `body > * {}` from you, thanks! — , Apr 02 '22 at 04:16

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

1 Answers1