Wie halte ich untergeordnete Elemente scharf, wenn ich einen Unschärfeeffekt auf das übergeordnete Element anwende?

Untergeordnete Elemente unter unscharfem Hintergrund scharf halten

Wenn Sie einen Unschärfeeffekt auf ein übergeordnetes Element anwenden, ist es möglich, dass sich dieser Effekt auf dessen übergeordnetes Element auswirkt untergeordnete Elemente, die deren Inhalt verdecken. Um dieses unerwünschte Verwischen untergeordneter Elemente zu verhindern, gibt es eine Lösung.

Erstellen Sie ein neues Div innerhalb des übergeordneten Elements und weisen Sie ihm das Hintergrundbild mit dem Unschärfeeffekt zu. Positionieren Sie dieses Div hinter den untergeordneten Elementen, indem Sie ihm einen niedrigeren Z-Index als dem Overlay geben. Verwenden Sie die folgende Codestruktur:

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
            <!-- Information content -->
        </div>
    </div>
</div></code>

Wenden Sie den Unschärfeeffekt auf das Overlay-Div an, während das Deckkraft-Div davon unberührt bleibt. CSS-Code:

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

.opacity {
    background-color: rgba(5, 98, 127, 0.9);
    z-index: 10;
}</code>

Das obige ist der detaillierte Inhalt vonWie halte ich untergeordnete Elemente scharf, wenn ich einen Unschärfeeffekt auf das übergeordnete Element anwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!