CSS3 Milchglaseffekt

Wenn der Milchglaseffekt gut gelingt, kann er die Seite sehr lebendig und dreidimensional erscheinen lassen. Direkt auf dem Bild

Körper {
    Mindesthöhe: 100vh;
    Box-Größe: Rahmenbox;
    Rand: 0;
    Polsterung oben: calc(50vh - 6em);
    Schriftart: 150 %/1,6 Serifen;
    Hintergrund: URL("iphone.jpg") fest 0 Mitte;
    Hintergrundgröße: Abdeckung;
}
hauptsächlich {
    Rand: 0 automatisch;
    Polsterung: 1em;
    maximale Breite: 30em;
    Rahmenradius: .3em;
    Boxschatten: 0 0 0 1px hsla(0,0%,100%,.3) Einschub,
                0,5em 1em rgba(0, 0, 0, 0,6);
    Textschatten: 0 1px 1px hsla (0,0 %, 100 %, 0,3);
    Hintergrund: hsla (0,0 %, 100 %, 0,3);
}

<main>……</main>

Entfernen Sie diese Stilcodes. Der Kerncode zum Erreichen des Milchglaseffekts lautet wie folgt:

Körper {
    …
    Hintergrund: URL("iphone.jpg") fest 0 Mitte;
    Hintergrundgröße: Abdeckung;
}
hauptsächlich {
    …
    Hintergrund: hsla (0,0 %, 100 %, 0,3);
}

Natürlich liegt dieser Effekt noch etwas hinter unseren Erwartungen zurück, denn schon eine Transparenz von 30 % würde die Lesbarkeit des Textes beeinträchtigen. Das Hintergrundbild dient lediglich der Verschönerung einer Seite, der Text bildet das Herzstück. Sie können den Transparenzprozentsatz erhöhen, die Seite sieht dann jedoch starr aus. Um den Text lesbarer zu machen und die Seite lebendig zu halten, können Sie den Hintergrund des Mian-Tags oben verwischen.

Du könntest es mit dem Weichzeichner-Filter versuchen, aber leider funktioniert dieser nicht richtig:

hauptsächlich {
    …
    -Webkit-Filter: Unschärfe (3px);
    Filter: Unschärfe (3px);
}

Durch die Verwendung des Weichzeichnerfilters wird der Text unscharf und ist dadurch noch schwerer zu erkennen. Daher muss ich aufgeben. Die richtige Vorgehensweise besteht darin, dem Mian-Tag ein Pseudoelement ::before hinzuzufügen und den Unschärfefilter auf dem Pseudoelement anzuwenden: (zu Demonstrationszwecken wird eine rote Hintergrundfarbe hinzugefügt).

hauptsächlich {
    Position: relativ;
    …
}
main::vor {
    Inhalt: '';
    Position: absolut;
    oben: 0; rechts: 0; unten: 0; links: 0;
    z-Index: -1;
    -Webkit-Filter: Unschärfe (20px);
    Filter: Unschärfe (20px);
    Hintergrund: rgba(255,0,0,.5);
}

Es ist ersichtlich, dass der Unschärfeeffekt erzielt wird, dies verursacht jedoch zwei Probleme. Zunächst entsteht durch die Unschärfe ein äußerer Schatten. Dies lässt sich leicht lösen. Fügen Sie einfach overflow: hidden; Zweitens wird der Unschärfeeffekt innerhalb des ihn umgebenden Unschärferadius von 20 Pixeln allmählich schwächer. Wenn Sie sich darüber Sorgen machen und möchten, dass der Unschärfeeffekt an den Rändern der gleiche ist wie in der Mitte, können Sie die Pseudoelementgröße um 20 Pixel erweitern. Um auf Nummer sicher zu gehen, können Sie es noch etwas weiter auf 30 Pixel erweitern:

hauptsächlich {
    …
    Überlauf: versteckt;
}
main::vor {
    …
    Rand: -30px;
}

Ersetzen Sie abschließend die rote Hintergrundfarbe des Pseudoelements durch das Hintergrundbild des Körpers. Der Effekt ist wie folgt. Sie können auch hier klicken und mit der rechten Maustaste klicken, um den vollständigen Quellcode anzuzeigen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.