根據 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;
}
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP