Vielleicht gibt es doch so etwas wie Background-Opacity?

Ich habe Jake's "Cross-fading any two DOM elements is currently impossible" gelesen, was eine wunderbar nerdige Tiefenanalyse darüber ist, wie es keine wirkliche Möglichkeit gibt, Elemente buchstäblich überzublenden. Ja, man kann die Opazität beider Elemente animieren, aber selbst das ist nicht ganz dasselbe. Es stellt sich heraus, dass es in Chrome/WebKit eine CSS-Funktion namens -webkit-cross-fade() gibt, die den Trick macht. MDN sagt, sie sei spezifiziert, aber die implementierte Version unterscheidet sich, also ist es ein ziemliches Durcheinander… aber sie existiert

.el {
  background: -webkit-cross-fade(url(img1.svg), url(img2.svg), 50%);
}

Ich wusste gar nicht, dass es so etwas gibt.

Das Erste, woran ich dachte, war: Wenn eines der Bilder nur ein leeres transparentes Bild wäre, würde das nicht dem anderen eine partielle Transparenz verleihen? Und somit wäre es eine Art Stellvertreter für background-opacity (was nicht existiert, aber sich so anfühlt, als sollte es).

Ich habe es getestet, um zu sehen, ob es funktioniert

Es scheint zu funktionieren! Das ist der Kern der Sache

.el {
  background-image: -webkit-cross-fade(
    url(image.jpg),
    url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7),
    50%
  );

Das ist ein 1px transparentes GIF, Base64-kodiert.

Es funktioniert nicht in Firefox, aber in allen anderen Browsern. Außerdem kann man die Unterstützung direkt in CSS testen und etwas anderes tun, wenn dies nur eine Verbesserung ist.

@supports (background: -webkit-cross-fade(url(), url(), 50%)) {

  /* Only apply the idea if supported, do the Firefox fallback outside of this */

}

Das ist im obigen Demo eingebaut.