Chỉ thay đổi một trong nhiều hình nền khi di chuột

Question

Tiêu đề cơ bản nói lên tất cả.

---

Dưới đây là một ví dụ:

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

Như bạn có thể thấy, chỉ có một trong những thay đổi ảnh nền - một trong những khác giữ nguyên trong mỗi nhà nước, nhưng vẫn đang được công bố Bốn lần!

Vì vậy, có thể chỉ thay đổi một trong các hình nền, nhưng để nguyên bản gốc khác - không phải khai báo lại nhiều lần?

_{Tôi biết rằng các thuộc tính nền CSS khác (lặp lại, vị trí, v.v.) có thể được đặt riêng. Đây chỉ là một ví dụ nhanh ...}

Answer 1

này bây giờ có thể với các biến 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); 
} 

Xem nó ở đây trong hành động: https://jsfiddle.net/22zu6oaq/

Answer 2

Không, không thể làm được, xin lỗi. Điều này nghe có vẻ giống như một bổ sung mà bạn có thể đề xuất, mặc dù tôi không chắc chắn nó sẽ diễn ra như thế nào về cú pháp và thác.