こんな感じのものを作ります。
まずコード
とりあえずコード貼ります。実物を見たい方はこちらから。
<!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; }
コード解説
今回の仕組みとしては
- bodyとh1で同じ背景画像を設定
- h1は「文字の部分だけ」背景画像が表示されるように設定
- h1の文字色を透明にする
- h1の色を反転させる
- 重ねて完成
(さらにオシャレにするために文字を縁取りしてますが、そこはオマケです)
文字の部分だけ背景を表示する
h1 { background-clip: text; -webkit-background-clip: text; color: transparent;
ここが文字部分で背景をマスキングして切り抜くコードです。言葉で言っても分かりづらいので画像で説明します。
このように文字の形に合わせて画像を切り抜きます。
色を反転させる
あとは切り抜いた画像の色を反転させればOKです。色はfilterを用いて反転させます。
filter: invert(1);
引数の1は「完全に反転させる」という意味です。0なら「全く反転させない」つまり元の画像のままになります。
文字部分を反転させるとこんな感じです。
invert(1)は、背景以外の部分もすべて反転させるので、縁取りも反転されます。そのため、、あらかじめ縁取りの色を反転させておく必要があります。今回は黒色でふち取りしたかったので、白色を設定しています。
気づいたこと
コントラストが低い画像だと面白くないです。サイバーパンクな感じの画像と相性がいいです。
