Wie kann verhindert werden, dass sich Weichzeichnungsfilter auf untergeordnete Elemente auswirken?

So entfernen Sie den Unschärfeeffekt auf untergeordneten Elementen

Wenn Sie einen Unschärfefilter auf ein übergeordnetes Element anwenden, kann dies manchmal Auswirkungen auf dessen untergeordnete Elemente haben Also. Um diesen unerwünschten Effekt zu verhindern, besteht eine clevere Lösung darin, ein zusätzliches Div innerhalb des übergeordneten Elements zu erstellen.

Lösung:

1. Erstellen Sie ein Überlagerungs-Div:

   Verschachteln Sie ein Div innerhalb des übergeordneten Elements mit einem Hintergrundbild, das dem Unschärfeeffekt entspricht. Weisen Sie ihm einen niedrigeren Z-Index als dem übergeordneten Div zu.

   <code class="html"><div class="content">
       <div class="overlay"></div>
       <div class="opacity">...</div>
   </div></code>

   Nach dem Login kopieren

2. Unschärfeeffekt auf Overlay-Div anwenden:

   Wenden Sie den Unschärfeeffekt an zum Overlay-Div anstelle des übergeordneten Div mithilfe von CSS:

   <code class="css">.content .overlay {
       background-image: url('...');
       -webkit-filter: blur(3px);
       -moz-filter: blur(3px);
       -o-filter: blur(3px);
       -ms-filter: blur(3px);
       filter: blur(3px);
       z-index: 0;
   }</code>

   Nach dem Login kopieren

3. Deckkraft-Div vorne positionieren:

   Das Deckkraft-Div sollte sein vor dem Overlay-Div mit einem höheren Z-Index positioniert.

   <code class="css">.opacity {
       z-index: 10;
   }</code>

   Nach dem Login kopieren

Vorteile dieses Ansatzes:

• Die Der Unschärfeeffekt ist im Overlay-Div enthalten und verhindert so, dass er sich auf untergeordnete Elemente auswirkt.
• Das Deckkraft-Div kann verwendet werden, um die Deckkraft und andere Eigenschaften des Inhalts zu steuern, ohne den Unschärfeeffekt zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass sich Weichzeichnungsfilter auf untergeordnete Elemente auswirken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!