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

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

Вот пример:

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

Ответы

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