背景色に合わせて自動で文字色を変更する方法（CSS or JS）はありますでしょうか。

背景色に合わせて自動で文字色を変更する方法について

添付のように画像の「TEST」の文字を背景色に合わせて、自動で変化（背景色or白）させることは可能でしょうか。
HTML実装の参考にしたく、CSSでもJavascriptでも大丈夫ですので教えていただけますと幸いです。

下記のようなサイトを調べましたがCSSで個別に指定していく方法が多く、
背景の白い円に合わせて文字色（TEXT部分）を背景色に自動で変化することができればと考えているのですが難しいでしょうか。。。
https://www.nxworld.net/tips/css-split-text-color.html
https://stand-4u.com/css/nongrid-text.html

m.ts10806

2020/10/29 04:23

作業依頼になってます。調べたこと試したことを記載してください。

aki.t

2020/10/29 04:30

失礼しました。追加しましたのでご確認いただけますと幸いです。

m.ts10806

2020/10/29 04:41

JavaScript絡めても結局はCSSの個別対応は必要になると思います。ある程度計算も必要になるのでは。

m.ts10806

2020/10/29 04:41

「試したこと」を記載してください。そのままのものを探しても大抵ないです。色々試して組み合わせて実現するものだと思います。

hatena19

2020/10/29 04:49

背景の白い丸はどのように実現してますか。 HTML、CSSで実現しているなら、そのコードを提示してください。画像なら、CSSでは無理でしょう。

aki.t

2020/10/29 08:46 編集

＞「試したこと」を記載してください。 https://codepen.io/tanakaaaaaa/pen/ExyQeXd 上記のようにHTML、CSSを試しました。その後、テキスト領域でシェイプがかぶっている色のみ変更させる方法を調べましたが、CSSで行う方法のみ見つかり、JSを使って実現できる方法はないか調べましたが見つからなかったため質問になります。（上記のコードで実現したいと思っているわけではないのでHTML・CSS書き換えることで動きそうであれば、別の方法で大丈夫なので解決方法があればお願いしたいです。）また、円にする場合にはborder-radiusを使って擬似要素を変更させる予定です。その他添付の画像と違い、斜め線が入っている・シェイプの形が四角になっておりますが、背景＋シェイプの状態で、手前のテキストがシェイプの色に合わせて背景色に自動で変更する方法があれば教えて頂きたいと言うの質問の意図になります。

m.ts10806

2020/10/29 08:35

コードはなるべく質問本文に提示してもらった方が。

行動規範の内容に同意します

回答4件

こんにちは。
楽しそうなお題ですね。

試しに、mix-blend-mode を使ってみましたが、これは単色だからできるやり方ですね。

サンプル

HTML
1<div>
2  <p>
3  test
4  </p>
5</div>

css
1div{
2    background-image: radial-gradient(#0ff, #0ff 50%, white 50%);
3}
4p{
5    color: #f00;
6    mix-blend-mode: difference;
7    font-size: 8em;
8}

投稿2020/10/29 06:43

Lhankor_Mhy

総合スコア36960

Lhankor_Mhy

2020/10/29 08:28

なぜ、これに高評価がついているのだろう……

aki.t

2020/10/29 08:29

下記で同様の方法拝見したのですがこのやり方だとブレンドモードを利用した色の変化な気がしていて、僕も背景色・テキストの色を指定するのが難しい気がしました。。ご回答頂きありがとうございます。 https://qiita.com/RyoTa0222/items/068e3c7b4e7b468e47c0

Lhankor_Mhy

2020/10/29 08:49

おっしゃるとおり、赤やシアンなどの色ではないと難しいです。色々こねればやれないこともないと思いますが、面倒だと思います。

行動規範の内容に同意します

svgとかでやるのが一番早いと思います

codepen svg text color

投稿2020/10/29 05:58

編集2020/10/29 05:59

yambejp

総合スコア116724

yambejp

2020/10/29 06:11

蛇足でアニメーションさせときました

aki.t

2020/10/29 08:38

アニメーション含め、ご回答頂きありがとうございます！やはりSVGで作成して実現させるのが手っ取り早いですよね。ありがとうございます。

行動規範の内容に同意します

「背景色」を背景に使わなくてもよいならmix-blend-modeでできました。
Lhankor_Mhyさんのコードを参考に、difference(かexclusion)で図形と文字のXOR演算をして白黒で形を作ってからもう1枚レイヤーを重ねてscreenで色を付けます。

HTML
1<div class="outer">
2<div class="letter">
3test
4</div>
5<div class="over"></div>
6</div>

CSS
1.outer{
2  position:relative;
3  height:300px;
4  width:300px;
5  background-image: radial-gradient(white, white 50%, black 50%);
6}
7.letter{
8  z-index:1;
9  position:absolute;
10  top:0px;
11  left:0px;
12  height:100%;
13  width:100%;
14  color: #fff;
15  font-size: 8em;
16  mix-blend-mode: difference;
17}
18.over{
19  z-index:2;
20  background-color: #ABD7FC;
21  position:absolute;
22  top:0px;
23  left:0px;
24  height:100%;
25  width:100%;
26  mix-blend-mode: screen;
27}

サンプル

投稿2020/10/29 13:34

ikadzuchi

総合スコア3047

こんな感じでしょうか。
考え方として、背面に「文字色白・背景青」と前面に「文字色青・背景白」の２つの要素を重ねて表示して、前面のものを丸状にクリッピング表示してやれば求めたようなデザインになります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8" />
5<style>
6#back {
7    position          : absolute;
8    top               : 10px;
9    left              : 10px;
10    font-size         : 60px;
11    color             : white;
12    background-color  : skyblue;
13}
14#front {
15    position          : absolute;
16    top               : 10px;
17    left              : 10px;
18    font-size         : 60px;
19    color             : skyblue;
20    background-color  : white;
21    clip-path         : circle(45% at 50% 50%);
22}
23</style>
24</head>
25<body>
26<div id="back" >TEST</div>
27<div id="front">TEST</div>
28</body>
29</html>