होवर

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

आप देख सकते हैं, पृष्ठभूमि छवियों परिवर्तन का केवल एक - एक दूसरे को हर राज्य में ही रहता है, लेकिन अभी भी चार घोषित किया जा रहा है बार!

तो, क्या पृष्ठभूमि में से केवल एक को बदलना संभव है, लेकिन दूसरे को छोड़ दें - इसे फिर से घोषित किए बिना?

_{मुझे पता है कि अन्य सीएसएस पृष्ठभूमि गुण (दोहराना, स्थिति इत्यादि) अलग से सेट किया जा सकता है। यह सिर्फ एक त्वरित उदाहरण है ...}

Answer 1

यह अब सीएसएस चर के साथ संभव है:

#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/

Answer 2

नहीं, अभी तक कोई नहीं कर सकता, क्षमा करें। यह एक ऐसा जोड़ जैसा लगता है जिसे आप प्रस्तावित कर सकते हैं, हालांकि मुझे यकीन नहीं है कि यह वाक्यविन्यास और कैस्केड के संदर्भ में कैसे खेलेंगे।