Multiple backgrounds are a nice thing to have, but wouldn't it be even better if we could cross-fade said multiple backgrounds for even more spectacular effects? The CSS Image Values and Replaced Content Module Level 4 promises that we can, and it has already been implemented in Webkit!
What are we talking about?
Attention! This only works in Webkit at the moment.
How does it work?
The CSS Image Values Replaced Content Module Level 4 (woah, that's one long spec name!), defines
a new CSS function for images. It accepts 3 parameters: the background-image, the foreground-image, and the
amount of crossfade in percentages. In this spec, 0% only shows the background-image and 100% only shows the
foreground image. Putting it all together we get:
background-image: cross-fade(url(img1.png), url(img2.png), 50%);
It is somewhat useful, as it saves you some bytes in transferring the combination of images. The spec says it should also be possible to cross-fade colors and gradients (what are they if not automatically generated images?). This means you could easily tint your images, plus it saves you the trouble of converting some of the images to semi-transparant PNGs.
Update: Lea Verou
cross-fade() is mostly useful hidden as the
browser uses this to transition between images behind the scenes.
Great, but can I use it today?
Not really, it works to some extent in Webkit browsers (Safari and Chrome), but only if you use two images. It doesn't work with gradients or solid colors, despite what the spec claims. On another note: when we tried this example with SVG images, we got some pretty strange results, so we had to resort to PNGs for now.
Show me the source!
Feel free to look around the differente sourc files we used for this example.