私がしたいことは、バックグラウンドの色に応じて色を変えるインターフェイスを作成して、テキストを常に読み取り可能にすることです。これまでのところすべて正常に動作します。私実施例を示すために私のブラウザを記録しました：私の研究からmix-blend-modeを適用した後の太いテキスト：difference
を、私はこれを達成するための最善の方法は、mix-blend-mode: difference;を使用していたことを発見しました。唯一の問題は、いくつかの未知の理由からテキストが太字になっていることです。
私はデモを提供したかったが、mix-blend-modeはコードスニペットでは機能していません。私は本当になぜ、私はデモでそれを使用して他の人を見てきましたが、私のために、それは赤色で強調表示されています。あなたが見ることができるように
は、適用した後mix-blend-mode: difference;テキストが明確に厚いです：
とにかく、ここで絵（ブラウザからのスクリーンショットの部）です。たぶん大したことではないかもしれませんが、これを小文字に適用すると、本当に悪く見えます。
私はそれが愚かだと知っていますが、私がPhotoshopで同じエフェクトを再現しようとしていたときには、すべてがうまくいきました。つまり、differenceブレンドモードで色を反転させると正しく動作します。
私の質問は次のとおりです。人間は銘符を厚くしなくても同じ結果を得ることができますか？それともそのように動作することを意味するのでしょうか？
フォントのスタイルをlightに変更して別の外観を強制したくないです。
編集：これは簡単な例です。私は理由はわかりませんが、今回はうまくいきました。前回のmix-blend-mode: difference;はデモではまったく動作しませんでした。そのため、画像を使用して自分の問題を説明しています。
とにかく、上のテキストが左右側が違いを見ることができるように、mix-blend-mode: difference;なしです。奇妙なのは、mix-blend-mode: difference;のない白いバージョンがうまく見えるようだ - 私はちょうど黒いbgにバージョンを追加することによってそれを発見した。ここで
* {
margin: 0;
padding: 0;
}
.white {
background-color: #fff;
width: 50%;
position: absolute;
left: 0;
height: 100%;
}
.black {
background-color: #000;
width: 50%;
position: absolute;
right: 0;
height: 100%;
}
.normalb {
position: absolute;
top: 50%;
left: 5%;
color: #000;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 42px;
transform: translateY(-50%);
z-index: 10;
}
.normalw {
position: absolute;
top: 50%;
right: 5%;
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 42px;
transform: translateY(-50%);
z-index: 10;
}
.difference {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 42px;
mix-blend-mode: difference;
z-index: 10;
}<div class="white"></div>
<div class="black"></div>
<div class="normalb">example</div>
<div class="normalw">example</div>
<div class="difference">example</div>詳しく見て取得するには、スクリーンショットの簡単な比較です：
うーん...それは白のテキストにmix-blend-mode: difference;を適用した後のように見えますそれは黒の白のようにレンダリングされていますが、フォントは同じなので奇妙な白い背景に表示されます。そのため、色を反転させると白の通常の黒のようになりますバージョンではありません。私は混乱しています。
あなたはjsfiddleを追加したり、スニペットにそのコードを作ることはできますか？私たちはそれが生きているのを見ることができるようにしたい。 –
スニペットを追加しました。 – Tanuki
同じ問題が発生しています！ – Dikeneko