CSS/Funktionen/cross-fade()

Browserunterstützung
caniuse.com

Die CSS-Funktion cross-fade() kann verwendet werden, um zwei oder mehr Bilder mit einer definierten Transparenz zu mischen. Es kann für viele grundlegende Bildbearbeitungen verwendet werden, z. B. zum Einfärben eines Bildes mit einer Volltonfarbe oder zum Hervorheben eines bestimmten Bereichs der Seite durch Kombinieren eines Bildes mit einem radialen Farbverlauf.

anwendbar auf

• background
  • background-image
• content
• cursor

Beispiel

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

Beachten Sie: Die Spezifikation und die aktuellen Implementierungen haben unterschiedliche Syntaxen.

Siehe auch

• CSS/Tutorials/Hintergrund

Weblinks

• CSSWG: cross-fade() CSS Images Module Level 4
• MDN: cross-fade()
• Browser-Support: caniuse.com