僅更改懸停時的多個背景中的一個

Question

標題基本上說明了一切。

---

下面是一個例子：

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

正如你所看到的，只有背景圖像的變化之一 - 另一種停留在每一個國家一樣，但仍然被宣佈次！

那麼，是否有可能只改變其中一個背景，而是保持原樣 - 而不必一遍又一遍地重新聲明它？

_{我知道其他CSS背景屬性（重複，位置等）可以單獨設置。這只是一個簡單的例子...}

Answer 1

這是現在可以通過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); 
} 

看到它在這裏的行動：https://jsfiddle.net/22zu6oaq/

Answer 2

不，不可以，對不起。這聽起來像是你可以提出的一個補充，但我不確定它在語法和級聯方面會如何發揮。