Dalam HTML, tukar warna teks berdasarkan kecerahan kawasan latar belakang yang dilindungi?

Anda boleh menggunakan coretan kod berikut untuk menukar warna teks berdasarkan purata kecerahan piksel yang ditindan oleh warna latar belakang induknya.

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>

Ini CSS -

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

Atas ialah kandungan terperinci Dalam HTML, tukar warna teks berdasarkan kecerahan kawasan latar belakang yang dilindungi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!