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="images/zwemmen.png" 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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

3 Wochen vor By DDD

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie kann ich KB5055612 in Windows 10 nicht installieren?

3 Wochen vor By DDD

Nordhold: Fusionssystem, erklärt

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Flüstern des Hexenbaum

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Java-Tutorial

1666

14

CakePHP-Tutorial

1426

52

Laravel-Tutorial

1328

25

PHP-Tutorial

1273

29

C#-Tutorial

1253

24

Mehr anzeigen