कवर पृष्ठभूमि क्षेत्र की चमक के आधार पर टेक्स्ट का रंग बदलें?

Question

मैंने पहले से ही कुछ समय के लिए निम्नलिखित के बारे में सोचा है, इसलिए अब मैं आपकी राय, संभावित समाधान, और इसी तरह जानना चाहता हूं।

मैं एक ऐसे प्लगइन या तकनीक की तलाश कर रहा हूं, जो मूल माता-पिता की पृष्ठभूमि-छवि या रंग के पिक्सेल के कवर की औसत चमक के आधार पर पूर्वनिर्धारित छवियों / आइकन के बीच पाठ का रंग या स्विच बदलता है।

यदि इसकी पृष्ठभूमि का ढका हुआ क्षेत्र अंधेरा है, तो पाठ को सफ़ेद बनाएं या आइकन स्विच करें।

इसके अतिरिक्त, यह बहुत अच्छा होगा यदि स्क्रिप्ट नोटिस करेगी कि क्या माता-पिता के पास कोई पृष्ठभूमि-रंग या -image परिभाषित नहीं है और फिर सबसे निकटतम (मूल तत्व से यह मूल तत्व तक की खोज जारी रखें)।

आप क्या सोचते हैं, इस विचार के बारे में जानें? क्या वहां पहले से ही कुछ ऐसा ही है? स्क्रिप्ट उदाहरण?

चीयर्स, जे।

Comments

जवाब के बजाय सिर्फ एक विचार। एचएसएल का उपयोग करके अपने रंगों को स्थापित करने का एक तरीका हो सकता है, फिर लपट के मूल्य को देखते हुए। यदि वह मान किसी निश्चित मान से ऊपर है, तो css नियम लागू करें।

— स्कॉट ब्राउन

अगर आप अल्फा चैनल को शून्य पर सेट करते हैं, तो आप R के, G, B (और वैकल्पिक अल्फ़ा) मानों में तत्व की पृष्ठभूमि के रंग को समझ सकते हैं। हालांकि, पृष्ठभूमि छवि के रंग को निर्धारित करने की कोशिश करना पूरी तरह से एक और मामला है।

— जैकवंडर्स

यहाँ पहले से ही उत्तर दिया गया है stackoverflow.com/questions/5650924/javascript-color-contraster

— पास्कल

@ पास्कल समान, और अच्छा इनपुट .. लेकिन यह मेरे प्रश्न का सटीक उत्तर नहीं है।

— बजे जेम्स कैजेट्टा

Answer 1

इसके लिए दिलचस्प संसाधन:

• W3C - सुनिश्चित करें कि अग्रभूमि और पृष्ठभूमि रंग संयोजन पर्याप्त विपरीत प्रदान करते हैं
• एक रंग की Perceived चमक की गणना

यहाँ W3C एल्गोरिथ्म ( JSFiddle डेमो के साथ ):

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update colours
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

#bg {
  width: 200px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bg">Text Example</div>

Comments

फेलिक्स तुम सही हो! मैं अब दूर हूँ, लेकिन यकीन है, जब वापस आऊंगा तो मैं जवाब अपडेट करूंगा

— एलेक्स बॉल

निम्नलिखित को छोटा किया जा सकता है, बशर्ते आप इसे एक ऑब्जेक्ट पास करें :::: const setContrast = rgb => (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000> 125? 'ब्लैक': 'व्हाइट'

— ल्यूक रॉबर्टसन

क्या u rly को css बदलने के लिए jquery की आवश्यकता है?

— ब्लूजैके

@bluejayke नहीं, अन्य तरीके हैं ;-)

— एलेक्स बॉल

Answer 2

रंग कंट्रास्ट की गणना के बारे में 24 तरीकों पर यह लेख आपके लिए रुचि का हो सकता है। फ़ंक्शंस के पहले सेट को नज़रअंदाज़ करें क्योंकि वे गलत हैं, लेकिन YIQ फॉर्मूला आपको यह निर्धारित करने में मदद करेगा कि लाइट या डार्क ग्राउंड कलर का इस्तेमाल किया जाए या नहीं।

एक बार जब आप तत्व (या पूर्वजों की) पृष्ठभूमि का रंग प्राप्त करते हैं, तो आप एक उपयुक्त अग्रभूमि रंग निर्धारित करने के लिए इस फ़ंक्शन का उपयोग लेख से कर सकते हैं:

function getContrastYIQ(hexcolor){
    hexcolor = hexcolor.replace("#", "");
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

Comments

धन्यवाद, यह वास्तव में उपयोगी है .. यह सेट पृष्ठभूमि-रंग पर निर्भर करता है .. लेकिन क्या आप जानते हैं कि प्रत्येक पिक्सेल (जैसे लूप) के माध्यम से चलाकर किसी छवि का औसत रंग कैसे प्राप्त किया जाए?

— बजे जेम्स कैज़ेटा

Es6 में आप इसके साथ कर सकते हैं:const getContrastYIQ = hc => { const [r, g, b] = [0, 2, 4].map( p => parseInt( hc.substr( p, 2 ), 16 ) ); return ((r * 299) + (g * 587) + (b * 114)) / 1000 >= 128; }

— Centril

मैंने इस फ़ंक्शन को लिया और इसे थोड़ा विस्तारित किया ताकि आप हमेशा काले और सफेद के बजाय दो कस्टम रंग वापस कर सकें। ध्यान दें कि यदि रंग एक साथ दो नज़दीकी हैं, तो भी आपको इसके विपरीत मुद्दे मिल सकते हैं, लेकिन यह निरपेक्ष रंगों को वापस लाने का एक अच्छा विकल्प है jsfiddle.net/1905occv/1

— हन्ना

यह एक सीओओ है, मैं बस यिक को> = 160 पर समायोजित करूंगा, मेरे लिए बेहतर काम किया।

— आर्टूरो

Answer 3

दिलचस्प सवाल। मेरा तात्कालिक विचार पृष्ठभूमि के रंग को पाठ के रूप में उलटना था। इसमें पृष्ठभूमि को पार्स करना और इसकी RGB वैल्यू को सम्मिलित करना शामिल है।

कुछ इस तरह: http://jsfiddle.net/2VTnZ/2/

var rgb = $('#test').css('backgroundColor');
var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var brightness = 1;

var r = colors[1];
var g = colors[2];
var b = colors[3];

var ir = Math.floor((255-r)*brightness);
var ig = Math.floor((255-g)*brightness);
var ib = Math.floor((255-b)*brightness);

$('#test').css('color', 'rgb('+ir+','+ig+','+ib+')');

Comments

आप शायद उल्टे R, G, B मान के औसत और उन्हें एक दूसरे के बराबर स्थापित करके अपने 'उल्टे' रंग को अलग करना चाहते हैं। हालांकि, यह समाधान एक स्ट्रिंग से अपना आधार रंग प्राप्त कर रहा है, और तत्व की सीएसएस संपत्ति से नहीं। विश्वसनीय होने के लिए, समाधान को गतिशील रूप से पृष्ठभूमि रंग प्राप्त करना होगा, जो आमतौर पर आरजीबी () या आरजीबीए () मान देता है, लेकिन ब्राउज़र के अनुसार भिन्न हो सकता है।

— जैकवंडर्स

हाँ। पार्सिंग में आसानी के लिए, मैंने सिर्फ एक हेक्स मूल्य का उपयोग किया। मैंने सीएसएस से तत्व के रंग को हथियाने के लिए फिडेल को अद्यतन किया। मैंने फ़िडेल को अद्यतन किया और एक प्रकार का चमक नियंत्रण शामिल किया (मुझे रंग गणित के बारे में कुछ भी नहीं पता है, इसलिए यह वास्तव में चमक नहीं है)।

— jeremyharris

इस बारे में कैसा है? stackoverflow.com/questions/2541481/…

— jeremyharris

क्या होगा अगर पृष्ठभूमि का रंग है #808080!

— नाथन मैकइन्स

@NathanMacInnes अभी भी इसे उलटा कर देगा, यह सिर्फ इतना होता है कि स्पेक्ट्रम के बीच में कुछ सही घुसने का परिणाम अपने आप होगा। यह कोड सिर्फ रंग को निष्क्रिय करता है, जो इसकी सीमाओं के साथ आता है।

— jeremyharris

Answer 4

mix-blend-mode उसने चाल चली:

header {
  overflow: hidden;
  height: 100vh;
  background: url(https://www.w3schools.com/html/pic_mountain.jpg) 50%/cover;
}

h2 {
  color: white;
  font: 900 35vmin/50vh arial;
  text-align: center;
  mix-blend-mode: difference;
  filter: drop-shadow(0.05em 0.05em orange);
}

<header>
  <h2 contentEditable role='textbox' aria-multiline='true' >Edit me here</h2>
</header>

परिवर्धन (मार्च २०१ition): निम्नलिखित, सभी अलग-अलग प्रकार के मोड / कार्यान्वयनों को समझाने वाला एक अच्छा ट्यूटोरियल: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

Answer 5

मुझे बैकग्राउंडचेक स्क्रिप्ट बहुत उपयोगी लगी है।

यह बैकग्राउंड की ओवरऑल ब्राइटनेस का पता लगाता है (बैकग्राउंड इमेज या कलर हो), और बैकग्राउंड की ब्राइटनेस पर डिपेंडेड टेक्स्ट-एलिमेंट ( background--lightया background--dark) की क्लास लगाता है ।

यह अभी भी और चलती तत्वों पर लागू किया जा सकता है।

( स्रोत )

Comments

योगदान के लिए धन्यवाद!

— जेम्स कैजेट्टा

क्या यह पृष्ठभूमि-रंगों के लिए काम करता है? मैंने स्क्रिप्ट को तेजी से पढ़ा है, और यह चमक के लिए जाँच करने के लिए पृष्ठभूमि-रंग का उपयोग नहीं कर सकता। केवल चित्र।

— जोर्जेन स्केचर फिशर

नमस्ते जोर्जेन, मुझे लगता है कि colourBrightness स्क्रिप्ट आपके उद्देश्य की पूर्ति कर सकती है: github.com/jamiebrittain/colourBrightness.js

— cptstarling

Answer 6

यदि आप ईएस 6 का उपयोग कर रहे हैं, तो हेक्स को आरजीबी में परिवर्तित करें तो इसका उपयोग कर सकते हैं:

const hexToRgb = hex => {
    // turn hex val to RGB
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result
        ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16)
          }
        : null
}

// calc to work out if it will match on black or white better
const setContrast = rgb =>
    (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 > 125 ? 'black' : 'white'

const getCorrectColor = setContrast(hexToRgb(#ffffff))

Answer 7

यहाँ मेरा प्रयास है:

(function ($) {
    $.fn.contrastingText = function () {
        var el = this,
            transparent;
        transparent = function (c) {
            var m = c.match(/[0-9]+/g);
            if (m !== null) {
                return !!m[3];
            }
            else return false;
        };
        while (transparent(el.css('background-color'))) {
            el = el.parent();
        }
        var parts = el.css('background-color').match(/[0-9]+/g);
        this.lightBackground = !!Math.round(
            (
                parseInt(parts[0], 10) + // red
                parseInt(parts[1], 10) + // green
                parseInt(parts[2], 10) // blue
            ) / 765 // 255 * 3, so that we avg, then normalize to 1
        );
        if (this.lightBackground) {
            this.css('color', 'black');
        } else {
            this.css('color', 'white');
        }
        return this;
    };
}(jQuery));

फिर इसका उपयोग करने के लिए:

var t = $('#my-el');
t.contrastingText();

यह सीधे दूर हो जाएगा, पाठ को या तो काला या सफेद बना देगा। आइकन करने के लिए:

if (t.lightBackground) {
    iconSuffix = 'black';
} else {
    iconSuffix = 'white';
}

तब प्रत्येक आइकन जैसा दिख सकता है 'save' + iconSuffix + '.jpg'।

ध्यान दें कि यह काम नहीं करेगा जहां कोई भी कंटेनर अपने माता-पिता को ओवरफ्लो करता है (उदाहरण के लिए, यदि सीएसएस ऊंचाई 0 है, और अतिप्रवाह छिपा नहीं है)। यह पाने के लिए कि काम करना बहुत अधिक जटिल होगा।

Answer 8

उत्तरों को जोड़कर [@ एलेक्स-बॉल, @ जेरेमीहरिस] मैंने पाया कि यह मेरे लिए सबसे अच्छा तरीका है:

        $('.elzahaby-bg').each(function () {
            var rgb = $(this).css('backgroundColor');
            var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

            var r = colors[1];
            var g = colors[2];
            var b = colors[3];

            var o = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) /1000);

            if(o > 125) {
                $(this).css('color', 'black');
            }else{
                $(this).css('color', 'white');
            }
        });

*{
    padding: 9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='elzahaby-bg' style='background-color:#000'>color is white</div>

<div class='elzahaby-bg' style='background-color:#fff'>color is black</div>
<div class='elzahaby-bg' style='background-color:yellow'>color is black</div>
<div class='elzahaby-bg' style='background-color:red'>color is white</div>