cross-fade()

Die Funktion cross-fade() nimmt eine Liste von Bildern mit einem Prozentsatz auf, der definiert, wie viel von jedem Bild in Bezug auf die Deckkraft erhalten bleibt, wenn es mit den anderen Bildern überblendet wird. Der Prozentwert muss ohne Anführungszeichen kodiert werden, muss das '%'-Symbol enthalten und sein Wert muss zwischen 0% und 100% liegen.

Die Funktion kann in CSS überall dort verwendet werden, wo eine normale Bildreferenz verwendet werden kann.

Cross-fade-Prozentsätze

Betrachten Sie den Prozentsatz als einen Deckkraftwert für jedes Bild. Das bedeutet, dass ein Wert von 0% das Bild vollständig transparent macht, während ein Wert von 100% das Bild vollständig undurchsichtig macht.

cross-fade(url(white.png) 0%, url(black.png) 100%); /* fully black */
cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
cross-fade(url(white.png) 100%, url(black.png) 0%); /* fully white */
cross-fade(url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

Wenn irgendwelche Prozentsätze weggelassen werden, werden alle angegebenen Prozentsätze zusammengezählt und von 100% abgezogen. Wenn das Ergebnis größer als 0% ist, wird das Ergebnis gleichmäßig auf alle Bilder mit weggelassenen Prozentsätzen verteilt.

Im einfachsten Fall werden zwei Bilder miteinander überblendet. Dafür muss nur eines der Bilder einen Prozentsatz haben, das andere wird entsprechend überblendet. Zum Beispiel ergibt ein Wert von 0% für das erste Bild nur das zweite Bild, während 100% nur das erste ergibt. Ein Wert von 25% zeigt das erste Bild zu 25% und das zweite zu 75%. Der Wert von 75% ist das Inverse und zeigt das erste Bild zu 75% und das zweite zu 25%.

Das oben Genannte hätte auch so geschrieben werden können:

cross-fade(url(white.png) 0%, url(black.png)); /* fully black */
cross-fade(url(white.png) 25%, url(black.png)); /* 25% white, 75% black */
cross-fade(url(white.png), url(black.png)); /* 50% white, 50% black */
cross-fade(url(white.png) 75%, url(black.png)); /* 75% white, 25% black */
cross-fade(url(white.png) 100%, url(black.png)); /* fully white */
cross-fade(url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

Wenn keine Prozentsätze angegeben werden, sind beide Bilder zu 50% undurchsichtig, wobei die Überblendung eine gleichmäßige Verschmelzung beider Bilder ergibt. Das 50%/50%-Beispiel oben hätte die Prozentsätze nicht auflisten müssen, da bei einem weggelassenen Prozentwert die enthaltenen Prozentsätze zusammengezählt und von 100% abgezogen werden. Das Ergebnis, wenn größer als 0, wird dann gleichmäßig auf alle Bilder mit weggelassenen Prozentsätzen verteilt.

Im letzten Beispiel ist die Summe beider Prozentsätze nicht 100%, und daher enthalten beide Bilder ihre jeweiligen Deckkraftwerte.

Wenn keine Prozentsätze angegeben werden und drei Bilder enthalten sind, ist jedes Bild zu 33,33% undurchsichtig. Die beiden folgenden Zeilen sind (fast) identisch:

cross-fade(url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);

cross-fade( <image>, <image>, <percentage> )

Die Spezifikation für die Funktion cross-fade() erlaubt mehrere Bilder und für jedes Bild Transparenzwerte, die unabhängig von den anderen Werten sind. Das war nicht immer der Fall. Die ursprüngliche Syntax, die in einigen Browsern implementiert wurde, erlaubte nur zwei Bilder, wobei die Summe der Transparenz dieser zwei Bilder genau 100% betrug. Die ursprüngliche Syntax wird in Safari unterstützt und mit dem Präfix -webkit- in Chrome, Opera und anderen Blink-basierten Browsern unterstützt.

cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
cross-fade(url(white.png), url(black.png), 100%); /* fully white */

In der implementierten Syntax werden die zwei durch Kommas getrennten Bilder zuerst deklariert, gefolgt von einem Komma und dem erforderlichen Prozentwert. Das Weglassen des Kommas oder Prozentwerts macht den Wert ungültig. Das Prozent gibt die Deckkraft des zuerst deklarierten Bildes an. Der enthaltene Prozentsatz wird von 100% abgezogen, wobei die Differenz die Deckkraft des zweiten Bildes ist.

Das Grün/Rot-Beispiel (mit den Prozentsätzen 150%) und das Gelb/Rot/Blau-Beispiel (mit drei Bildern) aus dem Abschnitt der Spezifikationssyntax sind in dieser Implementierung nicht möglich.

Browser bieten Assistive Technologies keine besonderen Informationen zu Hintergrundbildern. Dies ist hauptsächlich für Screenreader wichtig, da ein Screenreader das Vorhandensein nicht ankündigt und somit den Benutzern nichts vermittelt. Wenn das Bild Informationen enthält, die zum Verständnis des gesamten Zwecks der Seite erforderlich sind, ist es besser, es semantisch im Dokument zu beschreiben. Bei der Verwendung von Hintergrundbildern achten Sie darauf, dass der Kontrast in der Farbe groß genug ist, damit jeder Text über dem Bild ebenso lesbar ist wie bei fehlenden Bildern.

• MDN Understanding WCAG, Leitlinie 1.1 Erklärungen
• Verstehen des Erfolgskriteriums 1.1.1 | W3C Understanding WCAG 2.0

<cross-fade()> = 
  cross-fade( <cf-image># )  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

HTML

<div class="crossfade"></div>

CSS

.crossfade {
  width: 300px;
  height: 300px;
  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}

Ergebnis

• <image>
• <url>
• image()
• image-set()
• element()
• CSS-Verläufe verwenden
• Verlauffunktionen: linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()