Ich möchte eine Overlay-Klasse machen. Mein dom Element Baum würde wie folgt aussehen:Apply Filter über das gesamte Projekt, mit einem separaten div
<body>
<div id="root">
</div>
<div class="overlay">
<div class="gaussian-blur"></div>
<div class="modal"></div>
</div>
</body>
#root
ist, wo meine Anwendung gerendert wird. .overlay
wird bei einem Klickereignis bedingt zum Dom hinzugefügt. Ich möchte .overlay > .gaussian-blur
eine Maske über die gesamte Anwendung anwenden, nicht einschließlich .overlay > .modal
.
Mein .gaussian-blur
CSS sieht wie folgt aus:
.overlay > .gaussian-blur {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
position: absolute;
filter: blur(6px);
transition: filter 200ms ease-in-out;
}
Doch dies scheint nicht das #root
Komponente zu verwischen, als ob es sich um eine Überlagerung waren.
Ich kann Stile direkt zur Wurzelkomponente hinzufügen, die die Unschärfe anwendet, aber nicht auf div, das sie überlagert.
Gibt es eine Möglichkeit, dies mit CSS zu tun?
Nein zu wechseln, können Sie nicht Elemente verwischen können, die außerhalb des Elements sind Sie gelten der Filter zu. – CBroe