可以使用以下代码片段根据其父背景颜色覆盖像素的平均亮度来更改文本颜色。
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中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
132
