CSS-Unschärfe auf dem Hintergrundbild unter Beibehaltung der Klarheit des Inhalts

Bei dem Versuch, ein Hintergrundbild in einer CSS-Einstellung unscharf zu machen, kommt es häufig vor das Problem, dass auch der Inhalt (Text oder andere Elemente) unscharf wird. Hier kommt das Konzept des Z-Index und der Pseudoelemente ins Spiel.

Um das Hintergrundbild zu verwischen, ohne den Inhalt zu beeinträchtigen, kann der folgende Ansatz verwendet werden:

1. Erstellen eines Containers für den Hintergrund: Schließen Sie das Hintergrundbild in ein Div oder einen anderen Container ein und weisen Sie ihm eine Klasse zu, beispielsweise „blur-bgimage“.
2. Einführung eines Pseudoelements: Fügen Sie innerhalb der Klasse „blur-bgimage“ eine Pseudoklasse wie :before hinzu. Dadurch wird eine Ebene hinter dem Container erstellt, die das Hintergrundbild erbt.
3. Den Hintergrund verwischen: Wenden Sie den Unschärfeeffekt mithilfe von CSS-Filtern auf das Pseudoelement an. Dadurch wird das übernommene Hintergrundbild verwischt, ohne dass sich dies auf den Inhalt auswirkt.
4. Überlagern des Inhalts: Platzieren Sie den Inhalt im Container „blur-bgimage“ und stellen Sie sicher, dass er einen höheren Z-Index hat (z. B. , Z-Index: 1) als der unscharfe Hintergrund (Z-Index: 0).

Unten ist ein Beispielcode:

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}

Durch die Implementierung dieses Ansatzes können Sie das Hintergrundbild effektiv verwischen und gleichzeitig die Klarheit Ihres Inhalts bewahren, was optisch ansprechende Website-Designs ermöglicht.