A good approach for handling overriding multiple CSS backgrounds?

A good approach for handling overriding multiple CSS backgrounds?

I love that CSS3 has introduced multiple background images... but the
method of just having comma-separated images is kind of, well, not very
cascading, if you know what I mean.
Is there any approach out there to take this:
.a {
background: url(a.png) no-repeat center center;
}
.b {
background: url(b.png) repeat-x 0 bottom;
}
And apply it to an element such as this:
<div class="a b"></div>
Such that the computed style is:
background-image: url(a.png), url(b.png);
background-repeat: no-repeat, repeat-x;
background-position-x: center, 0;
background-position-y: center, bottom;
(I get that if the above CSS did this, it would be wrong. But it'd be
great if there were a solution like a property background-add or
something.)
I'm looking for any hope of a future solution to this... a spec, a
solution that only works in some browsers, the use of jQuery, whatever...
because there are a couple of other similar issues with the CSS3 spec as
well. For instance, you can't separate out the properties of text-shadow,
etc. It's rather frustrating.
Thanks....