पृष्ठभूमि रंग के आधार पर सीएसएस फ़ॉन्ट रंग उलटा करें

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

छद्म तत्वों का उपयोग करना

छद्म तत्वों का उपयोग पाठ के चारों ओर एक आवरण बनाने के लिए किया जा सकता है, फिर आप स्वतंत्र रूप से स्टाइल कर सकते हैं। उदाहरण के लिए:

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

दो DIV का उपयोग करना

पुराने ब्राउज़रों के लिए जो छद्म तत्वों का समर्थन नहीं करते हैं, आप इसके बजाय दो DIV का उपयोग कर सकते हैं:

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

नोट: आपकी विशिष्ट आवश्यकताओं और ब्राउज़र समर्थन के आधार पर सटीक कार्यान्वयन भिन्न हो सकता है।