auf nur eine von mehreren Hintergründen ändern schweben

Question

Der Titel sagt es im Grunde alles.

---

Hier ist ein Beispiel:

#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); 
} 

Wie Sie sehen können, nur eines der Hintergrundbilder ändern - der andere das gleiche in jedem Zustand bleibt, aber immer noch erklärt werden wird vier mal!

So ist es möglich, nur einen der Hintergründe zu ändern, aber die andere lassen wie es ist - ohne dass es über neu zu erklären und immer wieder?

_{Ich weiß, dass die anderen CSS-Hintergrundeigenschaften (Wiederholung, Position etc.) können separat eingestellt werden. Dies ist nur ein kleines Beispiel ...}

Answer 1

Dies ist mit CSS Variablen jetzt möglich:

#element { 
    --gradient: linear-gradient(to top, #86a53c, #516520); 

    background: url(image.png) no-repeat center center, 
       var(--gradient); 
} 

#element:hover { 
    --gradient: linear-gradient(to top, #A0C153, #516520); 
} 

es hier in Aktion sehen: https://jsfiddle.net/22zu6oaq/

Answer 2

Nö, keine kann noch tun, sorry. Das klingt nach einer Ergänzung, die Sie vorschlagen können, obwohl ich mir nicht sicher bin, wie es in Bezug auf Syntax und Kaskade ausgeht.