背景に画像を設定した場合、その上(手前)に文字等を表示することは簡単です。
ですがimgタグの画像の上(手前)に文字等を重ねて表示する場合は少し工夫が必要です。
「position: relative;」の内側にある「position: absolute;」は、
「position: relative;」を基準とした相対位置に表示されることを利用します。
HTMLの任意の箇所に、下記のように画像と文字を加えます。
<div id="layer_base">
<img src="画像URL" />
<div id="layer_1">文字1</div>
<div id="layer_2">文字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; /*左からの位置 */
}
基準値の幅や高さ、そして各相対位置はお好みにあわせて設定してください。
基準位置の上下左右どこからでも相対位置を指定できます。
これで画像と文字を重ねて表示することが出来ます。
スポンサーサイト