Wie entferne ich Hintergrundunschärfe von untergeordneten Elementen und behalte gleichzeitig den unscharfen Hintergrund bei?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-10-25 02:20:02

Original

509 Leute haben es durchsucht

How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

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="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div></code>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Hier sind einige auf Fragen basierende Artikeltitel, die zu Ihrem Inhalt passen und sich auf den praktischen Aspekt der Fehlerbehebung konzentrieren: * **Warum wird mein benutzerdefinierter Cursor in Firefox und Chrome nicht angezeigt?** * **Kundenspezifisches Cu Nächster Artikel：## Wie ändere ich CSS-Regeln mit JavaScript ohne Inline-Styling?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1676

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1827

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1553

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...