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

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

不,不,不,不好意思.这听起来像是你可以提出的补充,虽然我不确定它在语法和级联方面是如何发挥作用的.

Answer 2

现在可以使用 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/