मैं एकाधिक पृष्ठभूमि छवि घोषणा में केवल दूसरी छवि को ओवरराइड कैसे कर सकता हूं?

Question

मैं एकाधिक पृष्ठभूमि छवि घोषणा में केवल दूसरी छवि को ओवरराइड करने के लिए कैस्केड का उपयोग कैसे कर सकता हूं?

मैंने दो पृष्ठभूमि छवियों (बिल्ली का बच्चा, और दाईं ओर मछली) के साथ li एस के लिए एक मानक शैली निर्दिष्ट की है।

li { 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAYAAAA/xX6fAAAA/ElEQVR42q2WYQ3DIBSE5wAJk1AJSKiESpiESakEJCChEpAwCW/vJSw0LPQoHMn3A0q5R7leeIjIFNo2JSm+Zz5DSAy6oLan8lKiIjV5fGu8u+TnrkfIKftpUQGks3Au8qNE6yOx1Sb/xPJYyH3EURW4QsHGZ5NB3K0dDpDwDvEZysAZvvP4znVpwTVcmrAgLsLX/yXhP+xfrOyuza00sbFZ7p5TAGlyYMF/J4axNClOvKKVJnEmTa6gpgkSM0Ca8HdITxOiSwuzLjVoAUAUxIWQBXESMQTpSWQd4r0GuxiJsZPII0F6EnUZg5hES7dZWEkExPj3GiDCv9d8AVEGli2R88rKAAAAAElFTkSuQmCC) repeat-y 90% center, 
    #CCC url("http://placekitten.com/275/300") repeat right center; 
    margin: 1em; 
    padding: 1em; 
    color: #FFF; 
    font-weight: bold; 
} 

li.secondary { 
    background: #CCC url("http://placekitten.com/325/300") repeat left 10%; 
} 

JSFiddle: मैं भी li.secondary जहाँ मैं केवल दो पृष्ठभूमि छवियों के दूसरे बदलना चाहते हैं के लिए एक शैली निर्दिष्ट किया है http://jsfiddle.net/KatieK/9zcnp/1/

लेकिन बाहर पहले पृष्ठभूमि छवि background: चल रही है के लिए नए घोषणा (मछली)। मैं कैस्केडिंग नियम में केवल दूसरी पृष्ठभूमि छवि को कैसे संबोधित कर सकता हूं?

Answer 1

दुर्भाग्य से, जिस तरह से झरना कार्यों का उपयोग ओवरराइड कर सकते हैं प्रत्येक घोषणा में शेष परतों को दोहराए बिना व्यक्तिगत पृष्ठभूमि परतों को ओवरराइड करना असंभव बनाता है।

सामान्य तौर पर, एक प्रति घोषणा के आधार है, जहां प्रत्येक declaration के होते हैं पर cascade काम करता है वास्तव में एक प्रॉपर्टी तथा एक मूल्य:

/* Declaration */ 
property: value; 

पृष्ठभूमि परतों की एक अल्पविराम द्वारा अलग की गई सूची के लिए एक एकल मूल्य के रूप में गिना कैस्केड के उद्देश्य, यही कारण है कि आपका दूसरा background घोषणा पूरी तरह से पहले ओवरराइड करता है।

जबकि background कई अन्य गुणों के लिए एक शॉर्टेंड है, यह अलग-अलग पृष्ठभूमि परतों के लिए एक शॉर्टेंड नहीं है, क्योंकि उनके पास अपनी संपत्ति नहीं है। चूंकि अलग-अलग परत गुण मौजूद नहीं हैं, इसलिए आप शेष रखने के दौरान केवल कुछ परतों को ओवरराइड करने के लिए कैस्केड का उपयोग नहीं कर सकते हैं।

यही कारण है कि स्तरित पृष्ठभूमि में प्रीफिक्स्ड ग्रेडियेंट इतने वर्बोज़ और दोहराए गए हैं। अफसोस की बात है कि, यह सीएसएस वाक्यविन्यास की एक सीमा है, इसलिए अकेले सीएसएस का उपयोग करके इसके आसपास सुधार या काम करने के लिए बहुत कुछ नहीं किया जा सकता है।

---

_{यही कारण है कि background: #ccc की तरह एक आशुलिपि घोषणा एक छवि है कि पहले था background-image का उपयोग कर की घोषणा की (उदाहरण 1 और 2) को नष्ट करेगा के समान है। वहाँ है, क्योंकि किसी भी बॉक्स के लिए केवल एक ही पृष्ठभूमि रंग है, जो हमेशा उस परत में छवि के नीचे से नीचा परत में चित्रित है}

_{यह करने के लिए एक उल्लेखनीय अपवाद, background-color है। आप किसी नियम में कहीं भी एक ही मूल्य पर background-color सेट कर सकते हैं, और यह अन्य परतों को प्रभावित नहीं करेगा।}

Answer 2

जाहिर है इस तरह बात, कई पृष्ठभूमि background-image संपत्ति जो background-image-1 आदि

हालांकि जैसा कोई सन्तान है का उपयोग कर स्थापित कर रहे हैं नहीं है, आप इसे कुछ जावास्क्रिप्ट

Answer 3

मैंने इसे हल किया: छद्म-तत्व से पहले।

http://codepen.io/lajlev/pen/DAyhn

.tile { 
    position:relative; 
    display: block; 
    float: left; 
    width: 100px; 
    height: 100px; 
    margin: 30px; 
    background: url('http://www.schaik.com/pngsuite/tbbn3p08.png') no-repeat; 

    &:before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    z-index: -1; 
    } 
} 

.tile.last:before { 
    background-color: green; 
}