Create semi-transparent CSS background images by crossfading them with a transparent GIF

Nice work by Chris: when you crossfade an image — using the proprietary -webkit-cross-fade() — with a transparent gif, you can create semi-transparent background images.

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

Clever! WebKit/Chromium based browsers only though (i.e. no Firefox)

Maybe there kinda is background-opacity? →