Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

文字で背景画像を反転させるオシャレなやつやる

こんな感じのものを作ります。

まずコード

とりあえずコード貼ります。実物を見たい方はこちらから

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<h1>Now you are here and only here.</h1>
body, h1 {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9oeY3KTTBzbroISY9jpG2nTq_qMvORTH6cGB_bNDDmvuAGu9-_w);
    /* 使いたい画像のURLを設定する */
}
html, body, h1 { padding: 0; margin: 0} /* bodyとh1で背景画像がズレないように調整 */
h1 {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    filter: invert(1);

/* 以下は見栄え調節用 */
    text-align: center;
    font-size:64px;
}

コード解説

今回の仕組みとしては

  1. bodyとh1で同じ背景画像を設定
  2. h1は「文字の部分だけ」背景画像が表示されるように設定
  3. h1の文字色を透明にする
  4. h1の色を反転させる
  5. 重ねて完成

(さらにオシャレにするために文字を縁取りしてますが、そこはオマケです)

文字の部分だけ背景を表示する

h1 {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

ここが文字部分で背景を切り抜くコードです。言葉で言っても分かりづらいので画像で説明します。

…画像との相性があまり良くなくて分かりづらいですね…まあでもこんな感じです。

色を反転させる

色はfilterを用いて反転させています。

    filter: invert(1);

1というのは「完全に反転させる」という意味です。0なら「全く反転させない」になります。

h1を反転させるとこんな感じです。

invert(1)は、背景以外もすべて反転させます(border含む)。そのため、文字をふち取りしたいときは、あらかじめ色を反転させておく必要があります。今回は黒色でふち取りしたかったので、白色を設定しています。

気づいたこと

コントラストが低い画像だと面白くないです。サイバーパンクな感じの画像と相性がいいです。