You can use the following code snippet to change the text color based on the average brightness of the pixels covered by its parent background color.
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>
The following is CSS -
#box { width: 300px; height: 300px; }
The above is the detailed content of In HTML, change text color based on brightness of covered background area?. For more information, please follow other related articles on the PHP Chinese website!