ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML で、覆われた背景領域の明るさに基づいてテキストの色を変更しますか?

HTML で、覆われた背景領域の明るさに基づいてテキストの色を変更しますか?

PHPz
リリース: 2023-08-28 13:29:02
転載
654 人が閲覧しました

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;
}
ログイン後にコピー

以上がHTML で、覆われた背景領域の明るさに基づいてテキストの色を変更しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート