Beispielcode für die Verwendung von CSS cross-fade() zum Erzielen eines halbtransparenten Hintergrundbildeffekts

1. Anforderungsbeschreibung

Bei einem bestimmten Element möchten Sie, dass das background-image halbtransparent ist, andere Inhalte im Element, z. B. Text, Symbole usw., jedoch weiterhin undurchsichtig bleiben.

Wenn es sich um einen einfarbigen Hintergrund oder einen CSS-Farbverlaufshintergrund handelt, ist dies einfach zu handhaben. Verwenden Sie einfach rgba oder hsla Farbwerte.

Wenn es sich jedoch um url() -Hintergrundbild handelt, können wir anscheinend nichts tun.

Wenn es sich um ein Inline-Bild <img> handelt, ist es einfach zu handhaben. Ob es sich um einen Filter, eine Maske oder eine opacity handelt, wir können unseren Effekt erzielen. Dies ist jedoch ein Hintergrundbild, und alle oben genannten Methoden wirken sich auf die normale Anzeige des Textes aus.

Ich schätze, viele Leute würden auf die Idee kommen, die Pseudoelemente ::before / ::after zu verwenden, zum Beispiel:

.Kasten {
   Position: relativ;
   Z-Index: 0;
}
.box::vor {
   Inhalt: '';
   Position: absolut;
   links: 0; rechts: 0; oben: 0; unten: 0;
   Hintergrund: URL (xxx.jpg) keine Wiederholung, Mitte/enthalten;
   z-Index: -1;
   Deckkraft: .5;
}

Der Echtzeiteffekt ist wie folgt (wenn kein Effekt eintritt, besuchen Sie bitte den Originalautor Zhang Xinxu):

von Zhangxinxu

Allerdings ist diese Methode zu ausführlich und kostspielig (es werden viele Stapelkontexte erstellt und die Größe muss angepasst werden), sodass sie nicht in großem Maßstab verwendet werden kann.

Gibt es eine gute Möglichkeit, es umzusetzen?

Versuchen Sie es mit cross-fade() .

2. cross-fade() macht das Hintergrundbild halbtransparent

Mit cross-fade() können zwei Bilder halbtransparent ineinander übergehen.

Zum Beispiel:

<div Klasse = "Überblendbild""></div>

.Überblendbild {
    Breite: 300px; Höhe: 300px;
    Hintergrund: keine Wiederholung, Mitte/enthalten;
    Hintergrundbild: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);
    Hintergrundbild: Überblendung (URL (1.jpg), URL (2.jpg), 50 %);   
}

Der Effekt ist wie in der folgenden Abbildung dargestellt.

Bild 2.jpg wird mit Bild 1.jpg mit 50 % Transparenz gemischt gerendert.

Das obige Beispiel verwendet die traditionelle Syntax der Funktion cross-fade() , die wie folgt lautet:

<dfn id="ltimage-kombination">
<Bildkombination>
</dfn> = Überblendung( <Bild>, <Bild>, <Prozent> )

Hier bezieht sich <percentage> auf die Transparenz, wodurch nur die Transparenz des zweiten Bildes geändert wird. Der endgültige Effekt ist, dass das erste Bild vollständig undurchsichtig und das zweite Bild halbtransparent ist.

Was den Prozentwert in cross-fade() betrifft, ändert er nur die Transparenz des nächsten Bildes. Ich habe vor langer Zeit eine Demoseite zum Testen erstellt. Sie können hier klicken: CSS3 Cross-Fade-Attribut-Transparenzobjekttest

Die Screenshots sind wie folgt:

Obwohl die ursprüngliche Absicht cross-fade() darin besteht, mehrere Bilder halbtransparent übereinander zu legen, kommen solche Szenarien in der tatsächlichen Entwicklung selten vor. Daher eignet sich cross-fade() besser zur Steuerung des halbtransparenten Effekts eines einzelnen Hintergrundbilds.

Das Implementierungsprinzip ist sehr einfach. Verwenden Sie für das erste Bild ein transparentes Bild und für das zweite Bild ein Zielbild.

Zum Beispiel:

Ein Hintergrundbild ist im Dunkelmodus zu hell. Ich möchte die Helligkeit des Hintergrundbildes anpassen. cross-fade() wird durch den folgenden CSS-Code implementiert (das CSS für Breiten- und Höheneinstellungen wird weggelassen):

.dunkel {
    /* Fallback, IE- und Firefox-Browser*/
    Hintergrundbild: url(2.jpg);
    --transparent: URL (Daten: Bild/gif; Base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    /* Die neueste Version von Safari erfordert kein privates Präfix mehr*/
    Hintergrundbild: Überblendung (var (--transparent), URL (2.jpg), 40 %);
    /* Wenn Sie benutzerdefinierte Eigenschaften verwenden, muss die Anweisung -webkit- unter der Anweisung ohne das private Präfix platziert werden*/
    Hintergrundbild: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);

    Hintergrundgröße: Abdeckung;
}

Die Wirkung ist wie folgt:

Ist das nicht einfach? Ist das nicht viel zuverlässiger als die Implementierung von Pseudoelementen? Die entsprechende Demo finden Sie hier.

cross-fade() ist im Wesentlichen ein <image> -Bilddatentyp und eine Eigenschaft der Funktionen url() image, gradient image und image-set() und kann in border-image , mask-image und anderen Attributen verwendet werden.

Daher ist die Verwendung cross-fade() anstelle url() zum Erzielen des halbtransparenten Effekts des Hintergrundbilds die kostengünstigste und beste Methode.

3. Hervorragende mobile Kompatibilität

cross-fade() wird seit langem von WebKit-Browsern unterstützt, darunter iOS 5 und Android 4.4. Allerdings muss dafür ein privates Präfix festgelegt werden, wie in der folgenden Abbildung dargestellt:

Daher können Sie es auf Mobilgeräten bedenkenlos verwenden. Auf dem PC können Sie es bedenkenlos verwenden, wenn Sie den IE-Browser nicht berücksichtigen müssen. Selbst wenn Sie den IE berücksichtigen müssen, ist nichts dagegen einzuwenden. Der einzige Unterschied besteht darin, dass das Hintergrundbild immer noch vollständig undurchsichtig ist und das visuelle Erlebnis etwas geringer ist.

Es gibt auf dieser Welt keine nutzlosen CSS-Eigenschaften. Sie sind einfach noch nicht auf das richtige Szenario gestoßen. Genau wie diejenigen unter Ihnen, die noch Single sind: Sie haben einfach noch nicht den Richtigen getroffen.

Darüber hinaus verfügt die Funktion cross-fade() nach der Aufnahme in die CSS-Spezifikation über eine neue Syntax, die flexibler und leistungsfähiger ist, derzeit jedoch von keinem Browser unterstützt wird, sodass sie in diesem Artikel nicht vorgestellt wird.

Damit ist dieser Artikel über die Verwendung von CSS cross-fade() zum Erzielen eines durchscheinenden Hintergrundbildeffekts mit Beispielcode abgeschlossen. Weitere Informationen zum durchscheinenden Hintergrundbildeffekt mit CSS cross-fade() finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!