Измените только один из нескольких фонов при наведении

Название в основном говорит все.

Вот пример:

#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 (повтор, позиция и т.д.) можно установить отдельно. Это просто быстрый пример...}

Ответ 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/

Ответ 2

Нет, пока нет, извините. Это похоже на дополнение, которое вы можете предложить, хотя я не уверен, как он будет воспроизводиться с точки зрения синтаксиса и каскада.