0

I have a banner, which depending on the chosen theme, can have a "blurred" effect:

opacity: 50%;
backdrop-filter: blur(50px);

How can I ensure that the children of the banner element are not "blurred" - for example it includes elements such as logos/icons/text. I've tried adding opacity: 100% to the individual child elements but to no avail.

body {
  margin: 0;
}

.banner {
  height: 125px;
  background-color: green;
  opacity: 50%;
  backdrop-filter: blur(20px);
}

.logo {
  color: white;
}
<div class="banner">
  <p class="logo">This text should be white (without reduced opacity)</p>
</div>

Any thoughts/ possible workarounds appreciated!

cts
  • 908
  • 1
  • 9
  • 30
  • That is not really possible. – epascarello May 12 '23 at 15:21
  • You can't do it with the structure you have, but would pseudo elements or even a different HTML stucture help (are you able to change the HTML?) Is it just a background color and/or image that you want to blur and change the opacity of? – A Haworth May 12 '23 at 15:24
  • This should be possible by using rgba on the div. – j08691 May 12 '23 at 15:33
  • @j08691 I can't see how blur would be possible? – A Haworth May 12 '23 at 15:35
  • 1
    @AHaworth Keep the blur, but remove the opacity rule and use it in the rgba instead. That way the child text is unaffected but the opacity on the div stays – j08691 May 12 '23 at 15:39
  • I think this is the way to go, removing opacity and using rgba instead, thank you! – cts May 12 '23 at 15:47

0 Answers0