Vurguluda birden fazla arka plandan sadece birini değiştir

Question

Başlık, temel olarak her şeyi açıklıyor. Diğeri her durumda aynı kalır, ama yine de dört ilan ediliyor -

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

Gördüğünüz gibi, arka plan resimleri değişikliklerin tek: Burada

---

bir örnek kez!

Yani, yalnızca arka planlardan birini değiştirmek mümkün, ama diğerini olduğu gibi tekrar tekrar bildirmek zorunda kalmadan bırakmak mümkün mü?

_{Diğer CSS arka plan özelliklerinin (tekrarlama, konum vb.) Ayrı ayrı ayarlanabileceğini biliyorum. Bu sadece hızlı bir örnektir.}

Answer 1

Bu CSS değişkenlerle artık mümkün:

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

eylem buradan bakınız: https://jsfiddle.net/22zu6oaq/

Answer 2

Hayır, hayır, henüz yapabiliriz. Bu size önerebileceğiniz bir ek gibi geliyor, ancak sözdizimi ve kaskat açısından nasıl oynanacağından emin değilim.