http://10plate.blog44.fc2.com/blog-entry-317.html

画像の上に文字等を重ねる

背景に画像を設定した場合、その上（手前）に文字等を表示することは簡単です。
ですがimgタグの画像の上（手前）に文字等を重ねて表示する場合は少し工夫が必要です。

「position: relative;」の内側にある「position: absolute;」は、
「position: relative;」を基準とした相対位置に表示されることを利用します。

HTMLの任意の箇所に、下記のように画像と文字を加えます。

<div id="layer_base">
<img src="画像URL" />
<div id="layer_1">文字１</div>
<div id="layer_2">文字２</div>
</div>

画像URLや文字はお好みにあわせて設定してください。

そしてスタイルシートに以下を加えます。

#layer_base {
position: relative; /* 基準となる位置 */
width:1000px; /* 基準の幅 */
height: 300px; /* 基準の高さ */
}

#layer_1 {
position: absolute; /* 基準からの相対位置 */
top: 10px; /* 上からの位置 */
right: 10px; /* 右からの位置 */
}

#layer_2 {
position: absolute; /* 基準からの相対位置 */
bottom: 10px; /* 下からの位置 */
left: 10px; /*左からの位置 */
}

基準値の幅や高さ、そして各相対位置はお好みにあわせて設定してください。
基準位置の上下左右どこからでも相対位置を指定できます。

これで画像と文字を重ねて表示することが出来ます。

関連記事

[ 2009/10/12 01:40 ] カスタマイズ共通カスタマイズ | TB(0) | CM(13)

スポンサーサイト

画像の上に文字等を重ねる