मैं CSS का उपयोग करके रंग कैसे पलट सकता हूं?

87

एचटीएमएल

<div>
    <p>inverted color</p>
</div>

सीएसएस

div {
    background-color: #f00;
}
p { 
    color: /* how to use inverted color here in relation with div background ? */
}

क्या pसीएसएस के साथ रंग को पलटने का कोई तरीका है ?

नहीं है color: transparent;क्यों नहीं color: invert;CSS3 में भी?

css colors

— भोजेंद्र रौनियार
स्रोत

2

-वेबकिट-फिल्टर: इनवर्ट (100%);

— daniel__

1

यह आपके लिए बहुत उपयोगी हो सकता है: net.tutsplus.com/tutorials/html-css-techniques/…

— Ron van der Heijden

3

में इस बेला वेबकिट के लिए सीएसएस फिल्टर, Firefox के लिए एसवीजी फिल्टर, और के साथ शानदार चाल: मैं 3 दृष्टिकोण गठबंधन करने की कोशिश की outline-color: invert ली वेरोऊ द्वारा आविष्कार IE के लिए। दुर्भाग्य से, ओपेरा (प्रेस्टो) ने रूपरेखा से भरे क्षेत्र को क्लिप नहीं किया था overflow, इसलिए यह वहां काम नहीं करेगा। मुझे आशा है कि यह डेमो आगे के प्रयोगों के लिए उपयोगी हो सकता है।

— इल्या स्ट्रेल्ट्सिन

130

पैराग्राफ में पृष्ठभूमि का एक ही रंग जोड़ें और फिर सीएसएस के साथ पलटें:

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div>
    <p>inverted color</p>
</div>

स्निपेट का विस्तार करें

— ब्रूनो लेमोस
स्रोत

यह inverts color, लेकिन नहीं background। यह सिर्फ इतना होता है कि colorजैसे ही सेट होता है background-color। नीचे दिए गए समाधान के लिए नीचे देखें ।

— 41 ᆼ

10

यहां एक अलग दृष्टिकोण का उपयोग किया गया है mix-blend-mode: difference, जो वास्तव में पृष्ठभूमि में जो कुछ भी है, केवल एक रंग नहीं है:

div {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
  color: white;
  mix-blend-mode: difference;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>

स्निपेट का विस्तार करें

— ᆼ ᆺ ᆼ
स्रोत

1

+1 mix-blend-mode: differenceकाम करता है जहां filter: invert(100%)विफल रहता है position: fixed( जब

— मॉडल्स

2

मुझे लगता है कि इसे संभालने का एकमात्र तरीका जावास्क्रिप्ट का उपयोग करना है

किसी विशिष्ट तत्व के इस इनवर्ट टेक्स्ट कलर को आज़माएं

यदि आप css3 के साथ ऐसा करते हैं तो यह केवल नवीनतम ब्राउज़र संस्करणों के साथ संगत है।

— जन पीटर
स्रोत