2013-10-27 6 views
9

मैं <ul> और <li> तत्वों के साथ एक टैब जैसी कार्यक्षमता बना रहा हूं, और मैंने सीएसएस background-color: inherit के साथ इस तरह के अप्रत्याशित व्यवहार को देखा।
एक उम्मीद करेगा कि inherit वास्तव में transparent का अर्थ नहीं होगा, बल्कि child.background-color == parent.background-color (छद्म कोड को क्षमा करें)।अज्ञात पृष्ठभूमि रंग के लिए सीएसएस इनहेरिट वास्तव में पारदर्शी

मेरा कोड काफी सरल है, लेकिन मुझे एक समस्या है: मैं परिवर्तनीय परिस्थितियों के लिए विकसित कर रहा हूं। इसका मतलब है कि मैं कभी नहीं जानता कि मेरे कोड के साथ पृष्ठभूमि-रंग का उपयोग किया जाएगा, और मैं अपना खुद का परिचय नहीं देना चाहता हूं।

मैंने JSFiddle तैयार किया है, जिसमें पृष्ठभूमि को मेरे लोड के गंतव्य की यादृच्छिकता का अनुकरण करने के लिए पृष्ठ लोड पर यादृच्छिक रूप से सेट किया गया है। स्पष्ट समस्या यह है कि सक्रिय टैब अपने पृष्ठभूमि-रंग प्री-सेट के साथ भयानक दिखता है। तो, मैंने इसे background-color: inherit में बदल दिया। बजाय यह क्या करता है की (JSFiddle 2 देखें)

हालांकि यह स्पष्ट रूप से पृष्ठभूमि समस्या हल हो जाती, नीचे (cg_content) तत्व के बॉर्डर का प्रदर्शन दोबारा शुरू कर दिया, क्योंकि inherit संपत्ति, transparent तरह काम करता है, जब वहाँ एक सेट पृष्ठभूमि है रंग।

प्रश्न है: क्या जावास्क्रिप्ट के बिना वास्तविक पृष्ठभूमि रंग प्राप्त करने का कोई तरीका है?
यदि नहीं, तो क्या आप इन टैब को प्री-सेट रंगों के बिना अच्छे दिखने का बेहतर तरीका सुझा सकते हैं?

पीएस .: सामग्री <div><li> तत्वों का एक बच्चा तत्व नहीं होना चाहिए, क्योंकि ये टैब कुछ सामग्री साझा करते हैं।
पीएस.2: मैं इसे और स्पष्ट नहीं कर सकता, कि मैं स्पष्ट रूप से जानता हूं कि जेएस के साथ ऐसा कैसे करें। मैं बस नहीं चाहता।

उत्तर

15

background-color: inherit को पैरेंट तत्व का पृष्ठभूमि रंग लेने का कारण बनता है।

कारण यह transparent ले जा रहा है, क्योंकि माता-पिता की पृष्ठभूमि का रंग (li) transparent (डिफ़ॉल्ट मान) है।

आपके दूसरे जेएसफ़िल्ड में एकमात्र अन्य तत्व जिसमें पृष्ठभूमि रंग सेट है #unknown_background है, जो एंकर के महान-दादा-दादी हैं।

अपनी स्टाइलशीट के अंत में div, ul, li { background-color: inherit; } जोड़ें और पृष्ठभूमि को सभी तरह से विरासत में मिलाया जाएगा और सीमा दिखाई नहीं देगी।

+0

मैं उल के लिए कंटेनर div से छुटकारा पाने की भी सलाह दूंगा। इसे हटाने से नतीजे बिल्कुल नहीं बदलते हैं और आपको एक नया सीएसएस नियम और आईडी के साथ एक अन्य तत्व उत्पन्न करने की आवश्यकता नहीं है। – Cadoc

+0

धन्यवाद @ क्वांटिन। यह वास्तव में मेरे कोड के सरलीकृत संस्करण का समाधान है। लेकिन असली दुनिया के उदाहरण में, मेरा कोड वास्तविक पृष्ठभूमि रंग के साथ तत्व के एक महान-बड़े पोते का हिस्सा हो सकता है, और मेरे बीच के तत्वों के लिए कोई सीएसएस नियंत्रण नहीं है। इसके साथ कोई विचार? – mavrosxristoforos

+0

कुछ मनमाने ढंग से अन्य तत्व (या यहां तक ​​कि पूर्वजों) से अपनी पृष्ठभूमि लेने के लिए तत्व प्राप्त करने के लिए, सीएसएस में कोई रास्ता नहीं है। आप या तो विशिष्ट हो सकते हैं या आप माता-पिता से प्राप्त कर सकते हैं। – Quentin

संबंधित मुद्दे