Tengo un filtro de fondo en escala de grises aplicado a un .cover detrás de uno de mis menús superpuestos. Siempre tiene un color de fondo, pero cuando está .on , a veces, con JavaScript, quiero establecer el color de fondo de .cover en un negro opaco para oscurecer el fondo también.

Tengo el siguiente CSS aplicado a la portada:

 body { --darkMode: transparent; } .cover { background-color: #123456; } .cover.on { -webkit-backdrop-filter: grayscale(100%); backdrop-filter: grayscale(100%); background-color: var(--darkMode); /* Notable Line */ }

El JavaScript que establece la variable --darkMode es simplemente document.body.style.setProperty("--darkMode", "rgba(0, 0, 0, 0.5)");

Sin embargo, cuando el modo oscuro no está habilitado y, por lo tanto, el color de fondo de .cover es transparent como predeterminado , los filtros de fondo no funcionan en absoluto.

Puedes jugar con esto con este violín .

Gracias por cualquier información que pueda tener, y que tenga un día espléndido, persona que estuvo dispuesta a leer esta pregunta.

EDIT 1: Mis disculpas, el código anterior no estaba completo; Lo actualicé para reflejar mi código de manera más directa y agregué un violín JS para que pueda verlo usted mismo.

EDIT 2: Resulta que una solución es simplemente establecer el color de fondo en algo como rgba(0, 0, 0, 0.01) en lugar de transparente.