I have encountered a challenging issue that I am hoping to find a solution for. Let's consider the following HTML structure:
<div id="page">
<div id="menubar"></div>
</div>
Along with the CSS styling applied to it:
#page {
background: url("some-image.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#menubar {
background-color: rgb(36, 108, 228);
background-color: rgba(0, 50, 255, 0.6);
}
To elaborate, there is a div element #page with a background image covering it completely and a menubar with a 60% opacity allowing the background of div #page to show through. My challenge lies in wanting the background to shine through the menubar while also inverting the colors of the background where they are visible through the menubar.
Despite my efforts in searching online, I could not find a direct solution as the invert filter typically applies to entire images. Hence, I am reaching out here on SO in hopes that someone might suggest a clever workaround or technique to achieve this effect.
I appreciate any insights offered in advance!