In HTML die Textfarbe basierend auf der Helligkeit des abgedeckten Hintergrundbereichs ändern?

Mit dem folgenden Codeausschnitt können Sie die Textfarbe basierend auf der durchschnittlichen Helligkeit der Pixel ändern, die von der übergeordneten Hintergrundfarbe überlagert werden.

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>

Hier ist das CSS -

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

Das obige ist der detaillierte Inhalt vonIn HTML die Textfarbe basierend auf der Helligkeit des abgedeckten Hintergrundbereichs ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!