mix-blend-mode

今夜は月が綺麗だった。金色に輝いているように見えたのだが、写真だと加工中の銅って感じだな。

月を眺めた後、つまりついさっき知ったのだが、今では css だけで、背景に応じて文字色を変えることができるんだね。具体的にはこんな感じ。

白と黒

html


<div class="box smpl1">
  白と黒
</div>

css


.smpl1 {
  background-color: #000000;
  color: #ffffff;
}
.smpl1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  mix-blend-mode: difference;
  background-color: #ffffff;
}

ポイントは mix-blend-mode で、ここで指定している difference は、設定上の文字色と背景色のRGB各値の差分の絶対値を実際に表示する文字色とする。

上のサンプルの左半分が適用対象で、ここでは背景が白で文字も白。白は rgb(255,255,255) なので、背景と文字のRGB各値の差の絶対値を取った色は rgb(0,0,0) となる。つまり黒。これが文字色として適用されるのだな。

背景が画像の場合も同じ。

十三夜

html


<div class="box smpl2">
  <span>十三夜</span>
</div>

css


.smpl2 {
  background: black url(./pht_01.jpg) no-repeat center center;;
  color: #ffffff;
}
.smpl2 span {
  mix-blend-mode: difference;
}

設定自体は簡単だけど、背景画像と文字の組み合わせは難しいかもしれない。写真などの精細な画像だと、文字色も同じ精細さで決められる所為か、少々見辛い結果になってしまう。

指定できるのは difference の他にも色々あるので、そのうち試してみよう。