CSSで画像の上に文字を表示させる方法【半透明のぼかしも】
CSSの設定で画像の上に文字を載せる方法の説明とサンプルコードを紹介しています。トップ画像のデザインなどで重宝します。
CSSを使って画像（イメージ）の上に文字を載せる
Webサイトのデザインで、画像（イメージ）の上にタイトルやコメントなど文字を表示させたい場合があります。
その場合はCSSで要素を指定すれば実現可能です。
上の画像は私の運営しているサイトのトップ画面で使用しています。
イメージ画像の上に文字を表示させると、たとえ画面サイズが変わっても文字がぼやけることがなくオシャレなイメージのサイトが作成できます。
では、実際にCSSのコードを確認しましょう。
ポイントは要素の指定方法とposition
ポイントは要素の指定方法（クラスの指定）と、positionをどう利用するかです。
コードをみて見ましょう。
こちらは「example.jpg」の上に「THIS is EXAMPLE！」の文字を載せたい場合のHTMLの書き方です。
要素的には、exampleクラス（div class="example "）で「imgタグ」と「pタグ」を囲っていることがわかります。
HTMLはこのような構成にして、CSSで以下のようにコードを書きます。
ポイントは「example」でpositionをrelativeにして、画像の上に載せたい文字（pタグの文字）のポジションを「absolute」にして固定していることです。
このように指定すれば画像の上に文字を載せることができます。
あとはtopとleftのパーセントを変更して好きな場所に文字を表示させましょう。
文字を強調するために背景にぼかしを入れたい場合
背景の画像によっては文字がぼやけてしまうものがあります。
その場合には例えば半透明のぼかしを入れて文字を強調したい場合があります。
その場合は擬似要素「after」と「z-index」を使えば簡単にぼかしを作成できます。
「example::after」で透過した黒をイメージ画像に重ねています。
そしてpタグの要素には「z-index:1;」を追加しています。z-indexは奥行きの設定で、これはpタグが画像より前面に来るように指定しているのです。
注意したいのは、z-indexで指定するとモバイルなどでスクロールするときにヘッダーを固定してたりするとこの文字の方が浮き出ることがあるので、うまく表示させたい方法にフィットするように工夫してください。
ここまで基礎的な方法を書きました。さらにロゴを表示させたかったり、画像中央に文字を配置したいなど詳しい説明はサルワカというサイトがわかりやすいので参考にしてください。
