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

画像の上にテキストTOP

 

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

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

今回は、CSS(スタイルシート)はさわらずにHTMLの記述だけで、簡単に記事の中に入れることができます。

Sponsored Links

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

画像の上に文字を表示してみたサンプルをご覧ください

 

サンプル画像

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

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

 

 

こんな感じで表示されるようになります。

 

あらかじめ、画像を用意しておく必要があります。

 

 

コピーして記述しよう

画像を入れたい記事の中に、下記をコピーして記述してくだざい。

 

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

<div style=”position:absolute; top:50px; left:40px; width: 430px;”>

数字の部分を変えれば、すきな位置に文字が表示できます。

top:50px;=上の位置調整

left:30px;=左側の調整

width: 430px=幅の調整

すごく簡単でしょ、ぜひ、お試しを。

Sponsored Links

SNSでもご購読できます。

コメントを残す

*

CAPTCHA