背景に画像がある場合は文字色を白色に変更したい

Question

前提

HTMLとCSSでホームページを作っています。

実現したいこと

デザインにより画像に文字を重ねています。
文字色は通常は黒系ですが、画像に重なっている部分は見えにくいので
重なっている部分だけを自動的に白色に変更できるようなCSSを実装したいです。

発生している問題・エラーメッセージ

文字色を変更することはできましたが、白色にはできず
とても見えにくいです。

該当のソースコード

<ul>
	<li>
		<h2>
			牛乳を通して<br>
			毎日の健康と笑顔を<br>
			届けたい！
		</h2>
		<p>自然豊かな出雲の地で生産された安全で新鮮な生乳を使い、<br>衛生的な工場で製造した牛乳・乳製品を消費者の食卓にお届けすることで、<br>地域の幸せな暮らしに貢献します。</p>
	</li>
	<li>
		<figure>
			<img src="assets/img/concept_img01.jpg" alt="" class="img01">
		</figure>
	</li>
</ul>

ul {
  display: flex;
  justify-content: space-between;

  h2 {
    font-size: 4rem;
    color: #3e3a39;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
    padding-top: 48px;
    line-height: 1.6;
  }

  p {
    margin-top: 32px;
    color: #3e3a39;
    font-size: 2rem;
    font-family: $ja_go;
    font-weight: 500;
    line-height: 1.6;
    filter: invert(100%) grayscale(100%) contrast(100);
    mix-blend-mode: difference;
  }

  img.img01 {
    position: absolute;
    margin-left: calc(50% - 1470px);
    z-index: -1;
  }
}

Comments

[Cocode]

filterじゃなくてmix-blend-modeはどうですか？

↓解説
https://gokansoichiro.com/blog/css-mix-blend-mode/

↓解説サイトのサンプルページ
https://gokansoichiro.com/demo/mix-blend-mode/

追記：すでに使われたいましたね！失礼しました。

[hatena19]

HTMLを変更するはありですか。

Answer 1

HTMLを変更してもいいのなら、下記のような方針でいけそうです。

同じテキストの要素を2つ用意して、片方は文字色黒、他方は文字色白とする。
２つの要素をposition: absolute;で重ねる。
clip-pathで画像の境界線で左右を切り取る。

希望のレイアウトが不明なので、適当にそれらしいレイアウトにしたサンプルを作成しましたのでご参考に。

CodePenサンプル