2010-04-01 10 views
11

CSS3 के उदाहरण के लिए, कई पृष्ठभूमि छवियों का समर्थन करता है:सीएसएस - विरासत स्तरित पृष्ठभूमि छवियों

foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); } 

मैं हालांकि एक वर्ग के साथ एक तत्व के लिए एक उच्च माध्यमिक छवि जोड़ने के लिए सक्षम होने के लिए करना चाहते हैं।

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

मुझे पूरी पृष्ठभूमि संपत्ति को फिर से चलाने की बजाय पृष्ठभूमि छवि को 'जोड़ने' का कोई तरीका नहीं दिख रहा है। यह दर्द है क्योंकि बहु-पृष्ठभूमि के साथ ऐसा करने के लिए, यदि आइटम में अद्वितीय छवियां हैं तो आपको प्रत्येक आइटम के लिए आधार बीजी छवि को अधिक से अधिक लिखना होगा।

आदर्श रूप में मैं इस तरह कुछ करने के लिए सक्षम होगा:

li { background: url(baseImage.jpg); } 
li.selected { background: url(selectedIndicator.jpg); } 

और li.selected है के अंतिम परिणाम एक ही दिखाई देते हैं अगर मैं:

li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); } 

अद्यतन: मैं भी करने की कोशिश की कोई भाग्य नहीं है (मुझे विश्वास है कि पृष्ठभूमि विरासत में नहीं हैं ..)

li { background: url(baseImage.jpg), none; } 
li.selected { background: inherit, url(selectedIndicator.jpg); } 

उत्तर

3

मुझे नहीं लगता कि यह संभव है, मैं था एनके आपको हर बार पूरे नियम को फिर से परिभाषित करना होगा।

उदाहरण के लिए, आप वास्तविक आइटम वाले वास्तविक आइटम के साथ प्रारंभिक पृष्ठभूमि वाले "रैपर" को जोड़ सकते हैं। फिर चयनित होने पर आइटम पर पृष्ठभूमि को स्वयं जोड़ें।

4

यह किसी भी मामले में, सीएसएस विरासत के तरीके से नहीं है। inherit का तात्पर्य है कि तत्व को इसके मूल तत्व के गुणों पर लेना चाहिए, न कि समान तत्व को प्रभावित करने वाली पिछली घोषणाएं।

क्या आप चाहते हैं कि सीएसएस को अधिक ऑब्जेक्ट उन्मुख बनाने के तरीके के रूप में प्रस्तावित किया गया हो, लेकिन निकटतम आपको एसएएसएस जैसे प्री-प्रोसेसर के साथ मिल जाएगा।

अब के लिए आपको वास्तव में दूसरी छवि के साथ पहली छवि को दोबारा दर्ज करना होगा।