画像の上に文字を表示

質問

スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。

<IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0>
<IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0>
<IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0>
<IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0>
・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。

＃マウスをのせて表示は除外。

回答No.4

noname#199778 · ベストアンサー

スタイルシートで、表示位置の調整をすれば、画像の上にテキストを持ってくることもできます。
例えば、以下のような感じではいかがでしょうか。

<div style="height: 100px; overflow: hidden;">
<img src="***.jpg" width="100" height="100" style="z-index: 0;"><br>
<span style="position: relative; top: -1em; z-index: 1;">画像1</span>
</div>

上記ソースでは、改行で画像の下に回ってくるspan要素内のテキストを、本来の表示位置よりも一文字分上にずらし、画像に重ねて表示させるようにしています。 スタイルシートのposition: relative; top: -1em;の指定がその部分に当たります。 また、画像の上に確実に表示されるように、z-indexを1と指定してあります。
画像の方にも、スタイルシートでz-indexを0に指定し、確実にテキストの下に回るように指定してあります。
また、position: relativeで表示位置を調整すると、本来の表示位置にも表示枠を確保してしまうため、画像の下に1行分のスペースが空きます。 これを潰す意味で、この二つをdiv要素で括り、画像のサイズに合わせた表示枠を指定し、はみ出す部分についてはoverflow: hidden;で隠すようにしてあります。

こういった感じで、文字を画像の上に持って来ることも可能です。 スタイルシートの指定の仕方を工夫すれば、他にもいろいろとやり方はあると思います。
デザインに合わせて、書き易いソースで対応するのが良いと思いますよ。

参考になれば。

回答No.3

kosa

テーブルの背景に画像を使えば、あとはセルに文字を書くだけで「画像の上に文字」っていうのが簡単に実現できます

回答No.2

picoco

画像をDIVの要素背景として取り込んで、DIVの中に字を書くというのもありですね。

CSSでこのようにして
.img1 {
background-image : url(1.jpg) ;
background-repeat : no-repeat ;
width : 画像の横幅px;
height : 画像の縦幅px;
}

BODYの中は
<DIV class="img1">タイトルなどのテキスト</div>
こんな感じ。

class="img1"をimg2等に変えて、img2のスタイルを
background-image : url(2.jpg) ;
などのように当てはめて変えて行けば良いと思います。

DIVだと閉じたところで改行が入るので、画像を横に並べたい場合はテーブルで囲ってしまうと横並びも行けますね。
TABLEのTDの背景に画像を設定して

<TABLE><TR>
<TD background="1.jpg" width="画像の横幅" height="画像の縦幅">テキスト</TD>
</TR></TABLE>
とするのもありかもしれませんが、テーブルタグのheightをうまく認識できず、テキストが短ければその高さしか表示しないブラウザも結構あるので、CSSを使う方が無難だと思います。

回答No.1

noname#10926

絶対値で指定すればお好みの場所に文字を表示できるでしょう。

例えば
<P style="position : absolute;top : 20px;left : 10px;">hogehoge</P>

数値を変えれば位置が変わりますね。