web-dev-qa-db-ja.com

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

すでに次のことを考えていたので、今、あなたの意見、可能な解決策などを知りたいです。

親のbackground-imageまたは-colorの覆われたピクセルの平均輝度に応じて、テキストの色を変更したり、定義済みの画像/アイコンを切り替えるプラグインまたはテクニックを探しています。

背景の覆われた領域がかなり暗い場合は、テキストを白にするか、アイコンを切り替えます。

さらに、親が定義されたbackground-colorまたは-imageを持たないことをスクリプトが認識してから、最も近いもの（親要素からその親要素まで）を検索し続けるとすばらしいでしょう。

この考えを知って、どう思いますか？すでに似たようなものがありますか？スクリプト例？

乾杯、J。

javascriptjqueryhtml5canvasbackground
98
James Cazzetta

これに関する興味深いリソース：

W3Cアルゴリズムを以下に示します（ JSFiddle demo too ）：

var rgb = [255, 0, 0];

// randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // randomly update
  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
  var o = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  var fore = (o > 125) ? 'black' : 'white';
  var back = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', fore); 
  $('#bg').css('background-color', back);
  

}
#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>
153
Alex Ball

色のコントラストの計算 に関する24の方法に関するこの記事は、あなたの興味を引くかもしれません。最初の関数セットは間違っているため無視しますが、YIQの式は明るい前景色または暗い前景色を使用するかどうかを判断するのに役立ちます。

要素（または祖先）の背景色を取得したら、記事のこの関数を使用して適切な前景色を決定できます。

function getContrastYIQ(hexcolor){
    hexcolor = hexcolor.replace("#", "");
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}
46
cyang

興味深い質問。私の当面の考えは、テキストとして背景の色を反転させることでした。これには、単に背景を解析し、そのRGB値を反転するだけです。

このようなもの： http://jsfiddle.net/2VTnZ/2/

var rgb = $('#test').css('backgroundColor');
var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var brightness = 1;

var r = colors[1];
var g = colors[2];
var b = colors[3];

var ir = Math.floor((255-r)*brightness);
var ig = Math.floor((255-g)*brightness);
var ib = Math.floor((255-b)*brightness);

$('#test').css('color', 'rgb('+ir+','+ig+','+ib+')');
15
jeremyharris

mix-blend-modeはトリックを行います：

header {
  overflow: hidden;
  height: 100vh;
  background: url(https://www.w3schools.com/html/pic_mountain.jpg) 50%/cover;
}

h2 {
  color: white;
  font: 900 35vmin/50vh arial;
  text-align: center;
  mix-blend-mode: difference;
  filter: drop-shadow(0.05em 0.05em orange);
}
<header>
  <h2 contentEditable role='textbox' aria-multiline='true' >Edit me here</h2>
</header>

追加（2018年3月）：次に、すべての異なるタイプのモード/実装を説明する素敵なチュートリアル： https://css-tricks.com/css-techniques-and-effects-for-knockout-text/ =

5
James Cazzetta

BackgroundCheck スクリプトが非常に役立つことがわかりました。

背景の全体的な明るさ（背景画像または色）を検出し、背景の明るさに応じて、割り当てられたテキスト要素（background--lightまたはbackground--dark）にクラスを適用します。

静止および移動要素に適用できます。

（ ソース ）

4
cptstarling

ES6を使用している場合は、16進数をRGBに変換してからこれを使用できます。

const hexToRgb = hex => {
    // turn hex val to RGB
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result
        ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16)
          }
        : null
}

// calc to work out if it will match on black or white better
const setContrast = rgb =>
    (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 > 125 ? 'black' : 'white'

const getCorrectColor = setContrast(hexToRgb(#ffffff))
3
Luke Robertson

これが私の試みです。

(function ($) {
    $.fn.contrastingText = function () {
        var el = this,
            transparent;
        transparent = function (c) {
            var m = c.match(/[0-9]+/g);
            if (m !== null) {
                return !!m[3];
            }
            else return false;
        };
        while (transparent(el.css('background-color'))) {
            el = el.parent();
        }
        parts = el.css('background-color').match(/[0-9]+/g);
        this.lightBackground = !!Math.round(
            (
                parseInt(parts[0], 10) + // red
                parseInt(parts[1], 10) + // green
                parseInt(parts[2], 10) // blue
            ) / 765 // 255 * 3, so that we avg, then normalise to 1
        );
        if (this.lightBackground) {
            this.css('color', 'black');
        } else {
            this.css('color', 'white');
        }
        return this;
    };
}(jQuery));

次に、それを使用するには：

var t = $('#my-el');
t.contrastingText();

これはすぐに、必要に応じてテキストを黒または白にします。アイコンを実行するには：

if (t.lightBackground) {
    iconSuffix = 'black';
} else {
    iconSuffix = 'white';
}

その場合、各アイコンは'save' + iconSuffix + '.jpg'のようになります。

これは、コンテナがその親をオーバーフローさせる場合には機能しないことに注意してください（たとえば、CSSの高さが0で、オーバーフローが隠されていない場合）。それを機能させるには、はるかに複雑になります。

3
Nathan MacInnes