덮힌 배경 영역의 밝기에 따라 텍스트 색상을 변경 하시겠습니까?

덮힌 배경 영역의 밝기에 따라 텍스트 색상을 변경 하시겠습니까?

---

벌써 한동안 다음과 같은 생각을했기 때문에 이제 여러분의 의견과 가능한 해결책 등을 알고 싶습니다.

부모의 배경 이미지 또는 색상의 덮여 픽셀의 평균 밝기에 따라 텍스트의 색상을 변경하거나 미리 정의 된 이미지 / 아이콘간에 전환하는 플러그인 또는 기술을 찾고 있습니다.

배경의 가려진 영역이 다소 어둡다면 텍스트를 흰색으로 만들거나 아이콘을 전환하십시오.

또한 부모가 정의 된 배경색 또는 이미지가 없는지 스크립트가 알아 차린 다음 가장 가까운 (부모 요소에서 부모 요소까지) 계속 검색하면 좋을 것입니다.

이 아이디어에 대해 어떻게 생각하십니까? 이미 비슷한 것이 있습니까? 스크립트 예?

건배, J.

---

이에 대한 흥미로운 리소스 :

• W3C-전경색과 배경색 조합이 충분한 대비를 제공하는지 확인
• 색상의인지 된 밝기 계산

다음은 W3C 알고리즘입니다 ( JSFiddle 데모 포함 ).

var rgb = [255, 0, 0];

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

function setContrast() {
  // randomly update
  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
  var o = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  var fore = (o > 125) ? 'black' : 'white';
  var back = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', fore); 
  $('#bg').css('background-color', back);
  

}

#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 값을 반전시키는 것이 포함됩니다.

Something like this: 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 does the trick:

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>

Addition (March 2018): Following, a nice tutorial explaining all different types of modes/implementations: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

---

I've found the BackgroundCheck script to be very useful.

It detects the overal brightness of the background (be it a background image or a color), and applies a class to the assigned text-element (background--light or background--dark), dependent on the brightness of the background.

It can be applied to still and moving elements.

(Source)

---

Here's my attempt:

(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();
        }
        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 normalise to 1
        );
        if (this.lightBackground) {
            this.css('color', 'black');
        } else {
            this.css('color', 'white');
        }
        return this;
    };
}(jQuery));

Then to use it:

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

This will straight away, make the text either black or white as appropriate. To do the icons:

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

Then each icon could look like 'save' + iconSuffix + '.jpg'.

Note that this won't work where any container overflows its parent (for example, if the CSS height is 0, and overflow isn't hidden). To get that working would be a lot more complex.

---

If you are using ES6, convert hex to RGB then can use this:

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

참고URL : https://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area