เปลี่ยนสีข้อความตามความสว่างของพื้นที่พื้นหลังที่ปกคลุม?

ฉันคิดเกี่ยวกับสิ่งต่อไปนี้มาระยะหนึ่งแล้วดังนั้นตอนนี้ฉันต้องการทราบความคิดเห็นของคุณวิธีแก้ปัญหาที่เป็นไปได้และอื่น ๆ

ฉันกำลังมองหาปลั๊กอินหรือเทคนิคที่เปลี่ยนสีของข้อความหรือสลับระหว่างรูปภาพ / ไอคอนที่กำหนดไว้ล่วงหน้าขึ้นอยู่กับความสว่างเฉลี่ยของพิกเซลที่ครอบคลุมของภาพพื้นหลังหรือสีของผู้ปกครอง

หากพื้นที่ปกคลุมของพื้นหลังค่อนข้างมืดให้ทำให้ข้อความเป็นสีขาวหรือเปลี่ยนไอคอน

นอกจากนี้จะเป็นการดีมากหากสคริปต์จะสังเกตเห็นว่าพาเรนต์ไม่มีการกำหนดสีพื้นหลังหรือ - รูปภาพจากนั้นจึงค้นหาสิ่งที่ใกล้ที่สุดต่อไป (จากองค์ประกอบหลักถึงองค์ประกอบหลัก .. )

คุณคิดอย่างไรรู้เกี่ยวกับแนวคิดนี้หรือไม่? มีบางอย่างที่คล้ายกันอยู่แล้วหรือไม่? สคริปต์ตัวอย่าง?

ไชโยเจ.

แหล่งข้อมูลที่น่าสนใจสำหรับสิ่งนี้:

• W3C - ตรวจสอบให้แน่ใจว่าการผสมสีพื้นหน้าและพื้นหลังให้ความเปรียบต่างที่เพียงพอ
• การคำนวณความสว่างที่รับรู้ของสี

นี่คืออัลกอริทึม 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>

บทความเกี่ยวกับ 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';
}

คำถามที่น่าสนใจ ความคิดทันทีของฉันคือการเปลี่ยนสีของพื้นหลังเป็นข้อความ สิ่งนี้เกี่ยวข้องกับการแยกวิเคราะห์พื้นหลังและกลับค่า 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+')');

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>

เพิ่มเติม (มีนาคม 2018): ต่อไปนี้เป็นบทช่วยสอนที่ดีที่อธิบายโหมด / การใช้งานประเภทต่างๆทั้งหมด: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

ฉันพบว่าสคริปต์BackgroundCheckมีประโยชน์มาก

ตรวจจับความสว่างโดยรวมของพื้นหลัง (ไม่ว่าจะเป็นภาพพื้นหลังหรือสี) และใช้คลาสกับองค์ประกอบข้อความที่กำหนด ( background--lightหรือbackground--dark) ขึ้นอยู่กับความสว่างของพื้นหลัง

สามารถใช้กับองค์ประกอบที่อยู่นิ่งและเคลื่อนไหวได้

( ที่มา )

หากคุณใช้ ES6 ให้แปลง hex เป็น RGB จากนั้นสามารถใช้สิ่งนี้:

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))

นี่คือความพยายามของฉัน:

(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'ดังนี้

โปรดทราบว่าวิธีนี้จะใช้ไม่ได้เมื่อคอนเทนเนอร์ใด ๆ ล้นพาเรนต์ (ตัวอย่างเช่นหากความสูง CSS เป็น 0 และไม่ได้ซ่อนส่วนเกินไว้) การทำงานนั้นจะซับซ้อนกว่านี้มาก

เมื่อรวมคำตอบ [@ alex-ball, @jeremyharris] ฉันพบว่านี่เป็นวิธีที่ดีที่สุดสำหรับฉัน:

        $('.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>