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

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

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

배경의 가려진 부분이 다소 어두운 경우 텍스트를 흰색으로 만들거나 아이콘을 전환합니다.

또한 스크립트에서 부모가 정의된 배경색 또는 -image가 없는지 확인한 후 부모 요소에서 부모 요소로 가장 가까운 것을 계속 검색하면 좋을 것입니다.

어떻게 생각해요, 이 생각을 알고 있나요?저 밖에 벌써 비슷한 게 있나요?예를 들어요?

이를 위한 흥미로운 자료:

• 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){
    var r = parseInt(hexcolor.substring(1,3),16);
    var g = parseInt(hexcolor.substring(3,5),16);
    var b = parseInt(hexcolor.substring(5,7),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

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년 3월):다음은 다양한 유형의 모드/설정에 대해 설명하는 멋진 튜토리얼입니다. https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

재미있는 질문.나의 즉각적인 생각은 배경의 색을 텍스트로 뒤집는 것이었습니다.이것은 단순히 배경을 파싱하고 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+')');

[@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>

Background Check 스크립트가 매우 유용하다는 것을 알았습니다.

배경의 전체 밝기(배경 이미지든 색상이든)를 감지하고 할당된 텍스트 요소에 클래스를 적용합니다(background--light아니면background--dark배경의 밝기에 따라 달라집니다.

정지 및 이동 요소에 적용할 수 있습니다.

(출처)

ES6를 사용하는 경우 16진수를 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이고 오버플로가 숨겨져 있지 않은 경우).그것을 작동시키는 것은 훨씬 더 복잡할 것입니다.

HEX 6문자 색상 문자열(#123456)의 es6 대비는 다음 한 줄로 계산할 수 있습니다.

const contrastColor = c=>["#000","#fff"][~~([.299,.587,.114].reduce((r,v,i)=>parseInt(c.substr(i*2+1,2),16)*v+r,0)<128)];

여기 분류되어 읽을 수 있는 버전이 있습니다.

const contrastColor = color =>
{
  const lum = [.299 /*red*/,.587 /*green*/,.114 /*blue*/].reduce((result, value, index) => 
  {
    // with reduce() we can convert an array of numbers into a single number
    // result = previous result returned by this function
    // value = https://www.w3.org/TR/AERT/#color-contrast
    // index = current position index in the array
    // num = decimal number of Red, Green or Blue color
    const num = parseInt(color.substr(index * 2 + 1, 2), 16);
    return num * value + result;
  }, 0 /* result = 0 */);

  const isDark = lum < 128;
  const index = ~~isDark; // convert boolean into 0 or 1
  return ["#000","#fff"][index];
}

function setColors()
{

  for(let i = 0; i < 70; i++)
  {
    const bg = "#" + (~~(Math.random() * 16777216)).toString(16).padStart(6, 0),
          color = contrastColor(bg);
    node = test.children[i] || document.createElement("span");
    node.style.backgroundColor = bg;
    node.style.color = color;
    node.textContent = bg;
    if (!node.parentNode)
      test.appendChild(node);
  }
}

setColors();

#test
{
  display: flex;
  flex-wrap: wrap;
  font-family: monospace;
}
#test > *
{
  padding: 0.3em;
}

<button id="click" onclick="setColors()">change</button>
<div id="test"></div>

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