I've been struggling to understand the CSS interaction in a project I've been working on. Here's a codepen recreating it and the css I've used.

[Codepen](https://codepen.io/anon/pen/qgdbvw?fbclid=IwAR0Vj97Zm0KtadsNANp8FLwr6uXeV3LAQXOUDHSOfhShVZ7ZssNY2Qd3m_o)

```
.container
  /*background is set to emulate the real use case*/
  background red
  height 400px
  width 600px
  position relative
  display flex
  justify-content center
  align-items center
  opacity 0.9
.blurred
  background-image url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
  height 100%
  width 100%
  position absolute
  filter blur(7px)
  z-index -1
.text
  font-size 35px
  text-transform uppercase
  color brown
  /*this div is for comparison.
    at 0.9 opacity the white background under it is 
    not visible yet the image under .container is clearly
    visible at 0.9 opacity */
.comparison
  height 400px
  width 600px
  background red
  opacity 0.9

```

The idea here is that I wish to have an image with blur applied to it but also have text over it that's not blurred. The .container doesn't technically need a background color set but for the sake of recreating the issue exactly the way I encountered it I've set it's background color to red.

So according to my understanding lowering the opacity on .container makes .container and all its children more transparent. That is to say the lower it goes the easier it is to see the white background beneath all the elements. What I don't understand is why does the opacity also make .container fully transparent. I can clearly see the background image trough it. What I expected was for container to be filled with red and just barely showing the image inside. Instead .container has no filling color and I can clearly see the image.

I've made another div as a comparison. It's just a div with 0.9 opacity and nothing else. It doesn't lose it's background color like .container does.

I hope I've explained my question thoroughly enough. I've been trying to wrap my head around this for days now!