CSSを使用して背景色に基づいてテキストの色を変更することはできますか？

Question

cssを使用して背景色に基づいてテキストの色を変更することはできますか？この画像

で

ようなテキスト一のDIV（空白：NOWRAP）からクロスオーバーとしては、CSSまたはjqueryの/ JavaScriptを使用して、テキストの色を変更することが可能ですか？

ありがとうございました

Answer 1

はここに私の解決策である（別の方法によってそれを考えて）：

が評価スケールを示し海軍「バー」のためoverflow: hidden;にDIVを使用してください。 あなたは、テキストの2組の書き出し：DIVバー（オーバーフロー：隠された;）インサイド

1. を、それは（上）、白になり
2. 基礎となるDIVコンテナで、それは黒になります。結果は、2色のテキストのdivの重なりだろう

（コンテナ）：ここで

________________________________ 
|   1   | 2  | 
|_(dark blue w white)_|__________| 

である私のjsFiddle

場合、それは文字「を介してカット」になるので、それは素晴らしい作品バーはその幅にある。それを見て、私はあなたが探しているものだと思います。

Answer 2

いいえ、あなたはCSSだけではできません。これにはJavaScriptが必要です。 jQueryの/ JavaScriptで

あなたは要素がそれに適用されるCSSルールを持っているかどうかを確認した後、あなたがやりたいことができ、すなわち

また、ここで読む

if ($('#element').css('white-space') == 'nowrap') { 
    // do something 
} else { 
    // do something else 
} 

：Jquery: How to check if the element has certain css class/style

Answer 3

はいそれが可能です。

バックグラウンドカラーとフォアグラウンドカラーをクラスに結びつけて、テキスト上で使用することができます。たとえば、黒いテキストの白い背景と、白いテキストと黒の背景を持つスタイルクラスがあります。そのクラスを切り替えると、テキストが背景色で変わります。

たとえば、jQuery('body').css('color', '#fff')を使用して、本文テキストの色を白に変更することができます。

サンプルコードを入力すると、より具体的な回答を作成することもできます。

Answer 4

実際には、javascriptを使用する必要があります。私はこのような何かをすることによって問題にアプローチします：

1. オーバーラップの幅をピクセル単位で計算します。すなわちwidth = ${"#container"}.width() - ${"#progressbar"}.width();

2. ハイライトする必要があるテキストの量を計算します。follow this discussionを使用できます。私は空の文字列で始まり、その幅をチェックし、上で計算された幅よりも小さい場合は、1文字追加して繰り返します。文字列を選択すると、その文字列が選択されます。

3. このような文字列を、${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText);のように挿入します。明らかに、highlitedTextは2の文字を含む文字列です。restOfTheTextは残りの文字を含む文字列です。この方法の

良いことは、あなたのプログレスバーのdiv要素の幅を変更した場合、あなたはそれを再実行することができるということです。

希望に役立ちます！

Answer 5

この解決策はおそらく最も簡単ですが、私はあなたが必要としている（ともう少し詳しく）より徹底したjQueryプラグインを作成しました。

レポ：https://github.com/salsita/jq-clipthru
ブログ：要するにhttps://blog.javascripting.com/2014/06/11/changing-text-color-based-on-background-color/

は、それが動的オーバーラップと一致するように、生のCSSクリップを使用して、異なるCSSクラスとクリップその可視コンテンツを持つ要素のクローンを作成します。 CSSクリップは、position: absoluteまたはposition: fixedの要素にのみ対応しているので、テキストをそのように配置する必要があります（実際には問題ではないはずです）。