Eine Zeile CSS-Code zur Integration von Avatar und Nationalflagge

Es ist Nationalfeiertag und jeder kann es kaum erwarten, den Geburtstag unseres Mutterlandes zu feiern.

Jedes Jahr um diese Zeit wird es populär, das Profilbild auf WeChat Moments mit der Nationalflagge zu schmücken, und dieses Jahr ist der Trend folgender:

Emm, sehr gut.

Wie können wir also CSS verwenden, um einfach ein Flaggenbild mit unserem Avatar zu kombinieren und schnell den gewünschten Avatar zu erhalten?

Manche Leute denken, dass damit die Transparenz eines der Bilder geändert wird, aber das ist nicht der Fall. Schaut man sich die synthetisierten Avatare genau an, sieht man ganz links grundsätzlich nur die rote Flagge und nicht den ursprünglichen Avatar-Inhalt, während ganz rechts grundsätzlich nur der Avatar zu sehen ist und der rote Hintergrund der roten Flagge nicht mehr.

Verwenden Sie eine Maske in CSS, um den Avatar und die Nationalflagge mit einer Codezeile zusammenzuführen

In CSS müssen wir nur zwei Bilder übereinanderlegen und das Maskenattribut auf dem oberen Bild verwenden. Dieser Effekt kann mit nur einer Codezeile erreicht werden.

div {
    Position: relativ;
    Rand: automatisch;
    Breite: 200px;
    Höhe: 200px;
    // Normaler Avatar-Hintergrund: url(image1) no-repeat;
    Hintergrundgröße: Abdeckung;
}
.div::nach {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 0;
    unten: 0;
    rechts: 0;
    // Flaggenbildhintergrund: url(image2) no-repeat;
    Hintergrundgröße: Abdeckung;
    Maske: linearer Farbverlauf (110 Grad, Nr. 000 10 %, transparent 70 %, transparent);
}

Im obigen Code verwenden wir div und sein Pseudoelement div::after , um den Avatar und die Nationalflagge zu überlagern.

Wir müssen nur eine Maskenebene mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent) in div::after setzen und schon können wir die geschickte Überlappung des Avatars und der Nationalflagge erreichen:

Eine kurze Einführung in Mask

In CSS können Benutzer mit der Maskeneigenschaft einen Teil oder den gesamten sichtbaren Bereich eines Elements ausblenden, indem sie ein Bild auf einen bestimmten Bereich maskieren oder zuschneiden.

Die einfachste Möglichkeit, eine Maske zu verwenden, besteht in der Verwendung eines Bilds wie folgt:

{
    /*Bildwerte*/
    mask: url(mask.png); /* Bitmap als Maske verwenden*/
    mask: url(masks.svg#star); /* Verwende die Form in der SVG-Grafik als Maske*/
}

Natürlich ist die Methode zur Verwendung von Bildern tatsächlich komplizierter, da wir zuerst das entsprechende Bildmaterial vorbereiten müssen. Zusätzlich zu Bildern kann die Maske auch einen dem Hintergrund ähnlichen Parameter akzeptieren, nämlich einen Farbverlauf.

Ähnlich der folgenden Verwendung:

{
    Maske: linearer Farbverlauf (#000, transparent) /* Farbverlauf als Maske verwenden */
}

Das folgende Bild ist mit einem Farbverlauf von transparent nach schwarz überlagert.

{
    Hintergrund: URL (Bild.png);
    Maske: linearer Farbverlauf (90 Grad, transparent, #fff);
} 

Nach dem Auftragen der Maske sieht es so aus:

Diese DEMO vermittelt Ihnen einen kurzen Einblick in die grundlegende Verwendung der Maske.

Hier erhalten wir die wichtigste Schlussfolgerung zur Verwendung von Masken: Der überlappende Teil des Bildes und der durch die Maske erzeugte transparente Farbverlauf werden transparent.

Es ist erwähnenswert, dass der Farbverlauf oben linear-gradient(90deg, transparent, #fff) verwendet. Der #fff Vollfarbteil kann hier tatsächlich durch jede beliebige Farbe ersetzt werden, ohne den Effekt zu beeinträchtigen.

CodePen-Demo – Grundlegende Verwendung von MASK

Weitere Tipps zur Verwendung von Mask

Sobald Sie die Maske beherrschen, können Sie natürlich auf viele Arten damit spielen.

Beispielsweise können wir für den Flaggen-Avatar oben CSS @property verwenden, um einige interessante Hover-Effekte zu erzielen:

Oder verwenden Sie Masken, um interessante Übergangseffekte zu erzielen:

Sogar die Zeichen, die den Bullet-Screen auf der Bullet-Screen-Website blockieren, werden alle durch die Verwendung einer CSS-Maske erreicht:

Wenn Sie mehr über CSS MASK erfahren möchten, können Sie diese beiden Artikel sorgfältig lesen:

Magische CSS-MASKE

Verwenden Sie eine Maske, um eine Zeichenmaskenfilterung im Video-Bullet-Screen zu implementieren

Dies ist das Ende dieses Artikels darüber, wie man mit einer Zeile CSS-Code den Avatar und die Nationalflagge integriert. Weitere relevante Inhalte zur CSS-Integration von Avatar und Nationalflagge finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!