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

다음 코드 조각을 사용하여 상위 배경색으로 겹쳐진 픽셀의 평균 밝기를 기반으로 텍스트 색상을 변경할 수 있습니다.

var rgb = [255, 0, 0];
setInterval(display, 1000);
function display() {
   rgb[0] = Math.round(Math.random() * 255);
   rgb[1] = Math.round(Math.random() * 255);
   rgb[2] = Math.round(Math.random() * 255);
   
   var d = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) +
      (parseInt(rgb[2]) * 114)) / 1000);
   // for foregound
   var f = (d> 125) ? 'black' : 'white';
   
  // for background
  var b = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#box').css('color', f);
  $('#box').css('background-color', b);
}
<scriptsrc = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id = "box"> Demo</div>

여기 CSS가 있습니다 -

#box {
   width: 300px;
  height: 300px;
}

위 내용은 HTML에서 덮인 배경 영역의 밝기에 따라 텍스트 색상을 변경하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!