[解決済み] 背景の明るさに応じて文字色を変える?
2022-05-18 03:59:42
質問
親のbackground-imageまたは-colorのカバーピクセルの平均輝度に応じて、テキストの色を変えたり、あらかじめ定義された画像/アイコンを切り替えるプラグインやテクニックを探しています。
背景の覆われている部分がかなり暗い場合、テキストを白にしたり、アイコンを切り替えたりします。
さらに、親要素に background-color または -image が定義されていないことにスクリプトが気づき、最も近いものを探し続けることができれば最高です (親要素からその親要素まで...)。
このアイデアについてどう思いますか、知っていますか?似たようなものがすでにあるのでしょうか。例はありますか?
どのように解決するのですか?
このための興味深いリソースです。
以下は、W3Cのアルゴリズム( JSFiddleのデモも ):
const rgb = [255, 0, 0];
// Randomly change to showcase updates
setInterval(setContrast, 1000);
function setContrast() {
// Randomly update colours
rgb[0] = Math.round(Math.random() * 255);
rgb[1] = Math.round(Math.random() * 255);
rgb[2] = Math.round(Math.random() * 255);
// http://www.w3.org/TR/AERT#color-contrast
const brightness = Math.round(((parseInt(rgb[0]) * 299) +
(parseInt(rgb[1]) * 587) +
(parseInt(rgb[2]) * 114)) / 1000);
const textColour = (brightness > 125) ? 'black' : 'white';
const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
$('#bg').css('color', textColour);
$('#bg').css('background-color', backgroundColour);
}
#bg {
width: 200px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg">Text Example</div>
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
要素ツリー制御によるvueTreeテーブル
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] hr要素の色を変更する
-
[解決済み] svg要素の色を変更するには?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
JSアレイループと効率解析の比較
-
Vueにシンプルなメモ帳機能を実装
-
Vueの「データを聴く」原則を解説
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
[解決済み] Javascriptで画像の平均色を取得する