Wie verwischt man ein Hintergrundbild in CSS, ohne den Inhalt zu verwischen?

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

Beim 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, z. B. „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. 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:

<code class="css">.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;
}</code>

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

Das obige ist der detaillierte Inhalt vonWie verwischt man ein Hintergrundbild in CSS, ohne den Inhalt zu verwischen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!