Custom nav bar background image css thwarted by theme docs tw backdrop css

[mysteriouscenter]

When I use a background image in css or tw, for the navbar, the doc-theme's css --tw-backdrop-* modifiers prevent the image from appearing as anything but blurred.

I tried this in firefox and safari.

I tried setting my own settings to override, and they did somewhat, but seemed to get blocked at opacity. I'm able to disable them in developer tools to see the expected result and what is blocking it but not able to accomplish this with code:

@apply backdrop-brightness-100;
@apply backdrop-contrast-100;
@apply backdrop-grayscale;
@apply backdrop-hue-rotate-0;
@apply backdrop-invert-0;
@apply backdrop-opacity-90;
@apply backdrop-saturate-100;
@apply backdrop-sepia-0;
@apply backdrop-blur-none;

I tried using @apply backdrop-filter-none to disable the backdrop filters but it doesn't seem to override those set by the theme.

Is there some other way I'm missing here? Thanks for your help.

[dimaMachina]

You can use !backdrop-filter-none with !important

[mysteriouscenter]

Thank you, I should have thought of that.

Unfortunately that does not seem to solve this issue.

!backdrop-filter-none shows up and in FF the code for the backdrop filters show as struckthrough/disabled, but when I uncheck --tw-backdrop-opacity in both spots that is when my nav-bar image shows up.

I'm using the .nextra-nav-container selector.

I've also tried it with ! and specifying all of the backdrop filters with !important and still I need to uncheck the backdrop filters below even though they are struckthrough/disabled and then the image will show up not blurred/faded.

.nextra-nav-container {
@apply !bg-navimg;
@apply !bg-center;
@apply !bg-contain;
@apply !backdrop-opacity-0;
@apply !backdrop-brightness-100;
@apply !backdrop-contrast-100;
@apply !backdrop-grayscale;
@apply !backdrop-hue-rotate-0;
@apply !backdrop-invert-0;
@apply !backdrop-saturate-100;
@apply !backdrop-sepia-0;
@apply !backdrop-blur-none;
}

or

.nextra-nav-container {
@apply !bg-navimg;
@apply !bg-center;
@apply !bg-contain;
@apply !backdrop-filter-none;
}

In other words even though things appear to be communicated correctly to the engine, it is not working. Some kind of bug? But is reproduced in Safari and Chrome.

Should I report this as a TW issue?

[dimaMachina]

closing due no activity