Change only one of multiple backgrounds on hover

Question

The title basically says it all.

---

Here's an example:

#element {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #86a53c, #516520);
}

#element:hover {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #A0C153, #516520);
}

#element:active {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #516520, #A0C153);
}

As you can see, only one of the background images changes - the other one stays the same in each and every state, but is still being declared four times!

So, is it possible to only change one of the backgrounds, but leave the other one as is - without having to re-declare it over and over again?

_{I know that the other CSS background properties (repeat, position etc.) can be set separately. This is just a quick example...}

Answer 1

Nope, no can do yet, sorry. This sounds like an addition that you can propose, though I'm not sure how it'd play out in terms of syntax and the cascade.