【HTML】コピペでOK！画像の上にテキストを重ねてみよう

ブログやサイトで、画像の上にテキストが表示されてるのをよく見かけますね。

あれってどうやってするんだろうって思ったことありませんか？

今回は、CSS（スタイルシート）はさわらずにHTMLの記述だけで、簡単に記事の中に画像を入れてテキストを重ねる方法をご紹介します。

画像の上に文字を重ねる方法【HTML】

下では黒板の背景画像の上にテキストを重ねてあります。

この部分に書いてある文字は、画像ではなく背景画像の上にテキストが表示されています。

この部分に書いてある文字は、画像ではなく背景画像の上にテキストが表示されています。

画像を用意しよう

はじめに、テキストを重ねたい画像を用意してアップロードしておきましょう。

ここでは下のような黒板の画像を用意しました。

コピーして記述しよう

画像をアップロードしたら、画像を入れたい記事の中に、下記をコピーして記述しましょう。

<div style="position: relative; display:inline-block;">
<img src="./img/top.png" alt="topimg"> 
<div style="position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%; padding: 30px; text-align: left;">
<p>ここに文章を書く</p>
</div></div>

あとは、画像の大きさに合わせて文章の位置を調整しましょう。

<div style=”position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%; padding: 30px; text-align: left;”>

以下の数字の部分を調整することで、背景画像のすきな位置に文字を表示することができます。

おわりに

簡単に画像の上に文字を重ねることができましたね。ぜひ試してみてくださいね。