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!

Improve this question
6
  • That is not really possible. Commented May 12, 2023 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? Commented May 12, 2023 at 15:24
  • This should be possible by using rgba on the div. Commented May 12, 2023 at 15:33
  • @j08691 I can't see how blur would be possible? Commented May 12, 2023 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 Commented May 12, 2023 at 15:39

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.