Drei Beispiele für Unschärfe-Hintergrundeffekte mit CSS3

Beginnen wir nicht mit der Einleitung, sondern kommen wir gleich zur Sache.
Der normale Hintergrundunschärfeeffekt ist wie folgt:

Eigenschaften verwenden:

Filter: (2px)

Normale Hintergrundunschärfe

Aus ästhetischen Gründen kann der Text vor dem Hintergrund nicht verwischt werden, und das Filterattribut führt dazu, dass die gesamten Nachkommen des Div weiße Ränder haben. Mit anderen Worten: Dieser Effekt kann nicht erzielt werden. Was sollte ich tun? Wir können Pseudoelemente verwenden, die auch das Problem des weißen Rands lösen.

Umsetzungsideen:
Legen Sie den Hintergrund im übergeordneten Container fest und verwenden Sie die relative Positionierung, um die Überlappung von Pseudoelementen zu erleichtern. In :after müssen Sie nur den Hintergrund übernehmen, die Unschärfe festlegen und ihn absolut positionieren, um das übergeordnete Element abzudecken. Auf diese Weise werden untergeordnete Elemente im übergeordneten Container nicht von der Unschärfe beeinflusst. Denn die Unschärfe eines Pseudoelements kann nicht auf die Kinder des Elternelements vererbt werden.
Nachdem wir so viel gesagt haben, wollen wir unser Gedächtnis mit etwas Code auffrischen.

Einfaches HTML-Layout:

<div Klasse="bg">
   <div class="drag">wie Fenster</div>
</div>

CSS:

/*Unscharfer Hintergrund*/
.bg{
    Breite: 100 %;
    Höhe: 100 %;
    Position: relativ;
    Hintergrund: URL("../image/banner/banner.jpg"), keine Wiederholung behoben;
    Polsterung: 1px;
    Boxgröße: Rahmenbox;
    z-Index: 1;
}
.bg:nach{
    Inhalt: "";
    Breite: 100 %;
    Höhe: 100 %;
    Position: absolut;
    links: 0;
    oben: 0;
    Hintergrund: erben;
    Filter: Unschärfe (2px);
    Z-Index: 2;
}
.ziehen{
    Position: absolut;
    links: 50 %;
    oben: 50 %;
    transformieren: übersetzen(-50 %,-50 %);
    Breite: 200px;
    Höhe: 200px;
    Textausrichtung: zentriert;

    z-Index: 11;
}

Natürlich können Sie nach dem Betrachten des obigen Codes feststellen, dass die untergeordneten Elemente unter dem übergeordneten Container ebenfalls eine absolute Positionierung verwenden müssen. Dies wirkt sich jedoch nicht auf das nachfolgende Layout aus. Sie können es also gerne verwenden (wenn Sie Fragen haben, können Sie den Blogger um Hilfe bitten~). Es ist zu beachten, dass der Z-Index zum Bestimmen der hierarchischen Beziehung verwendet wird und dass sichergestellt werden muss, dass das untergeordnete Element (das hierhin gezogen wird) ganz oben steht. Andernfalls wird der Text der untergeordneten Elemente nicht angezeigt.

Der obige Code enthält auch eine Methode, die sicherstellt, dass das Div zentriert ist. Aufmerksamen Schülern dürfte das aufgefallen sein! Dies sollte eine relativ einfache Methode zum Zentrieren ohne Verwendung des Flex-Layouts sein.

Welchen Effekt hat es also, einen solchen Code zu schreiben?

Teilweise unscharfer Hintergrund

Im Vergleich zum vorherigen Effekt ist die teilweise Hintergrundunschärfe relativ einfach. Zu diesem Zeitpunkt muss das übergeordnete Element das zu verwischende Pseudoelement nicht festlegen. Direkt analog zum obigen Code wird das untergeordnete Element verwischt, die Nachkommen des untergeordneten Elements werden jedoch möglicherweise nicht verwischt (beachten Sie, dass die Lösung wie im vorherigen Effekt beschrieben ist).
Das HTML-Layout hat sich leicht geändert:

<div Klasse="bg">
   <div Klasse="ziehen">
        <div>wie Fenster</div>
   </div>
</div>

Der CSS-Code lautet wie folgt: (bitte beachten Sie den Vergleich)

/*Partielle Hintergrundunschärfe*/
.bg{
    Breite: 100 %;
    Höhe: 100 %;
    Hintergrund: URL("../image/banner/banner.jpg"), keine Wiederholung behoben;
    Polsterung: 1px;
    Boxgröße: Rahmenbox;
    z-Index: 1;
}
.ziehen{
    Rand: 100px automatisch;
    Breite: 200px;
    Höhe: 200px;

    Hintergrund: erben;

    Position: relativ;
}
.ziehen >div{
    Breite: 100 %;
    Höhe: 100%;
    Textausrichtung: zentriert;
    Zeilenhöhe: 200px;
    Position: absolut;
    links: 0;
    oben: 0;
    Z-Index: 11;
}
.ziehen:nach{
    Inhalt: "";
    Breite: 100 %;
    Höhe: 100 %;
    Position: absolut;
    links: 0;
    oben: 0;
    Hintergrund: erben;
    filter: blur(15px);/*Um die Unschärfe deutlicher zu machen, erhöhen Sie den Unschärfegrad*/
    Z-Index: 2;
}

Die Wirkung ist wie folgt:

Der Hintergrund ist teilweise klar

Den Effekt, den Hintergrund teilweise klar zu machen, ist weder einfach noch schwierig. Der Schlüssel liegt darin, das Attribut background:inherit richtig anzuwenden. Sie können hier keine Transformation verwenden, um es vertikal zu zentrieren, also wählen wir das flexible Layout. Wird hier das Transform-Attribut verwendet, wird zusätzlich der Hintergrund versetzt. Auf diese Weise kommt es zu keinem lokalen Klarheitseffekt.
Das HTML-Layout bleibt unverändert.
Achten Sie auf die Änderungen im CSS:

/*Teilweiser Hintergrund ist klar*/
.bg{
    Breite: 100 %;
    Höhe: 100 %;
    Position: relativ;
    Hintergrund: URL("../image/banner/banner.jpg"), keine Wiederholung behoben;
    Polsterung: 1px;
    Boxgröße: Rahmenbox;
}
.bg:nach{
    Inhalt: "";
    Breite: 100 %;
    Höhe: 100 %;
    Position: absolut;
    links: 0;
    oben: 0;
    Hintergrund: erben;
    Filter: Unschärfe (3px);
    Z-Index: 1;
}
.ziehen{
    Position: absolut;
    links: 40 %;
    oben: 30 %;
    /*transformieren: übersetzen(-50%,-50%);*/
    Breite: 200px;
    Höhe: 200px;
    Textausrichtung: zentriert;

    Hintergrund: erben;
    z-Index: 11;

    Kastenschatten: 0 0 10px 6px rgba(0,0,0,.5);
}

Effektanzeige:

Damit ist dieser Artikel über drei Beispiele für das Erzielen von unscharfen Hintergrundeffekten mit CSS3 abgeschlossen. Weitere relevante CSS3-Inhalte zu unscharfen Hintergründen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!