क्या सीएसएस का उपयोग कर पृष्ठभूमि रंग के आधार पर टेक्स्ट रंग बदलना संभव है?

Question

क्या सीएसएस का उपयोग कर पृष्ठभूमि रंग के आधार पर टेक्स्ट रंग बदलना संभव है?

इस छवि

पाठ के रूप में की तरह एक div से पार (white-space: nowrap) यह सीएसएस या jQuery/जावास्क्रिप्ट का उपयोग कर पाठ का रंग बदलने के लिए संभव है?

धन्यवाद

Answer 1

यहाँ मेरी समाधान है (एक अलग तरह के माध्यम से यह सोच):

नौसेना 'बार' है कि रेटिंग के स्थान पर पता चलता के लिए overflow: hidden; के साथ एक DIV का प्रयोग करें। फिर आप पाठ के दो सेट को लिखने:

1. DIV बार (अतिप्रवाह: छिपा हुआ;) के अंदर, यह सफेद (शीर्ष पर) होगा
2. अंतर्निहित div कंटेनर में, यह काला हो जाएगा। (कंटेनर)

परिणाम दो रंग का पाठ divs का एक ओवरलैप होगा:

________________________________ 
|   1   | 2  | 
|_(dark blue w white)_|__________| 

यहाँ है मेरी jsFiddle

यह बहुत अच्छा काम करता है, क्योंकि यह करता है, तो पत्र 'के माध्यम से कटौती' होगा बार उस चौड़ाई पर है। इसे देखें, मुझे लगता है कि आप जो खोज रहे हैं।

Answer 2

नहीं, आप इसे केवल सीएसएस के साथ नहीं कर सकते हैं। इसके लिए आपको जावास्क्रिप्ट चाहिए।

jQuery/जावास्क्रिप्ट के साथ

आप देख सकते हैं कि एक तत्व पर लागू किए गए CSS नियम है, और फिर तुम क्या चाहते हो, अर्थात

if ($('#element').css('white-space') == 'nowrap') { 
    // do something 
} else { 
    // do something else 
} 

इसके अलावा यहां पढ़ें: Jquery: How to check if the element has certain css class/style

Answer 3

हाँ कि संभव है।

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

और आप jQuery('body').css('color', '#fff') का उपयोग कर सकते हैं उदाहरण के लिए शरीर के पाठ का रंग सफेद में बदलने के लिए।

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

Answer 4

दरअसल, आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता है। मैं इस तरह कुछ करने से समस्या से संपर्क करूंगा:

1. पिक्सेल में ओवरलैप की चौड़ाई की गणना करें। यानी width = ${"#container"}.width() - ${"#progressbar"}.width();

2. आपके द्वारा हाइलाइट करने के लिए पाठ की मात्रा की गणना करें, आप follow this discussion का उपयोग कर सकते हैं। मैं एक खाली स्ट्रिंग के साथ शुरू करूंगा, इसकी चौड़ाई की जांच करें और यदि यह ऊपर की चौड़ाई की तुलना में कम है तो एक वर्ण जोड़ें और दोहराएं। एक बार यह उच्चतर चुनने के बाद उस स्ट्रिंग को

3. स्पैन के बीच उपरोक्त स्ट्रिंग डालें, जैसे ${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText); जाहिर है हाइलाइट टेक्स्ट एक स्ट्रिंग है जिसमें वर्ण 2 हैं। और restOfTheText शेष वर्णों के साथ एक स्ट्रिंग है।

इस विधि की अच्छी बात यह है कि यदि आप अपनी प्रगति पट्टी की चौड़ाई बदलते हैं तो आप इसे फिर से चालू कर सकते हैं।

आशा है कि मदद करता है!

Answer 5

जबकि स्वीकार्य समाधान इस सटीक मामले के लिए शायद सबसे आसान है, मैंने एक और अधिक पूर्ण jQuery प्लगइन लिखा है जो आपको वही करता है (और थोड़ा और)।

रेपो: https://github.com/salsita/jq-clipthru
ब्लॉग: https://blog.javascripting.com/2014/06/11/changing-text-color-based-on-background-color/

संक्षेप में, यह गतिशील रूप से अलग सीएसएस वर्गों और क्लिप उनके दिखाई देने वाली सामग्री ओवरलैप मैच के लिए कच्चे सीएसएस क्लिप उपयोग करने के साथ एक तत्व के क्लोन पैदा करता है। यदि आप इसका उपयोग करते हैं, तो कृपया ध्यान दें कि सीएसएस क्लिप केवल position: absolute या position: fixed तत्वों पर काम करती है, इसलिए आपको अपना टेक्स्ट इस तरह से रखना होगा (जो वास्तव में आपके मामले में कोई समस्या नहीं है) जैसा कि मैंने इसे देखा है)।