仅更改悬停时的多个背景中的一个

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

不，不可以，对不起。这听起来像是你可以提出的一个补充，但我不确定它在语法和级联方面会如何发挥。