Wie entferne ich Hintergrundunschärfe von untergeordneten Elementen und behalte gleichzeitig den unscharfen Hintergrund bei?

Hintergrundunschärfe von untergeordneten Elementen entfernen

Sie haben ein

mit einem Hintergrundbild mit Unschärfeeffekt. Allerdings sind auch alle untergeordneten Elemente von dieser Unschärfe betroffen, was unerwünscht ist. Dieser Artikel bietet eine Lösung zur Behebung dieses Problems, die es Ihnen ermöglicht, den Unschärfeeffekt auf dem Hintergrundbild beizubehalten und gleichzeitig die Schärfe der untergeordneten Elemente beizubehalten.

Lösung: Erstellen Sie ein Overlay-Element

Um dies zu erreichen, können Sie ein separates

erstellen. innerhalb des übergeordneten Elements und wenden Sie das Hintergrundbild und den Unschärfeeffekt auf dieses neue Element an. Positionieren Sie dieses Element dann mithilfe von Z-Index-Werten hinter den vorhandenen untergeordneten Elementen.

Hier ist die geänderte HTML-Struktur:

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="/static/imghwm/default1.png" data-src="images/zwemmen.png" class="lazy" alt="">
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div></code>

CSS:

<code class="css">.content {
    float: left;
    width: 100%;
}

.content .overlay {
    background-image: url('images/zwemmen.png');
    height: 501px;
    -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);
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}</code>

In diesem Setup wird auf das .overlay-Element der Unschärfeeffekt angewendet, während das .opacity-Element verhindert, dass dieser Effekt die untergeordneten Elemente erreicht, was zu scharfen und fokussierten untergeordneten Elementen über einem unscharfen Hintergrund führt.

Das obige ist der detaillierte Inhalt vonWie entferne ich Hintergrundunschärfe von untergeordneten Elementen und behalte gleichzeitig den unscharfen Hintergrund bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!