Zmiana tylko jednego z wielu tła przy uaktywnieniu myszy

Question

Tytuł w zasadzie mówi wszystko.

---

Oto przykład:

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

Jak widać, tylko jeden z obrazów tła zmian - druga pozostaje taka sama w każdym stanie, ale wciąż jest zadeklarowana cztery razy!

Tak, to jest możliwe, aby zmienić tylko jedną z tła, ale pozostawić drugą jak jest - bez konieczności ponownego zadeklarować je w kółko?

_{wiem, że inne właściwości CSS tła (powtarzam, pozycja itd.) Można ustawić oddzielnie. To tylko krótki przykład ...}

Answer 1

Jest to obecnie możliwe ze zmiennymi CSS:

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

Zobacz go w akcji tutaj: https://jsfiddle.net/22zu6oaq/

Answer 2

Nie, nie można zrobić jeszcze, przepraszam. Brzmi to jak dodatek, który możesz zaproponować, choć nie jestem pewien, jak by to wyglądało pod względem składni i kaskady.