画像の上にテキストを乗せる
いちまい にまい。そして、つづき
[C:]background-image で画像を指定。
background-repeat を no-repeat にして繰り返しを抑制する。
画像にあわせて height を指定する(画像サイズ)。
内側に入るブロックは p タグでくくる。
pタグの padding で上下位置を合わせる。
左右の位置も padding で調節する。
[/C]
<div style="background-image:url('img/aaaa.png');background-repeat:no-repeat;height:75px;">
<p style="padding: 30px 0px;">
<span style="color:#ff0000">いちまい</span>
<span style="color:#0000ff">にまい。そして、つづき</span>
</p>
</div>
<div class="clr"></div>
[S: color:#cc0000;]※background-repeat:no-repeat を忘れずに！※表示上改行をいれているが、ワードプレスなど自動編集されるエディタを使っている場合は、
改行を取っ払った方が操作しやすい。[/S]
これは、基本的に見出しなどの原理と同じで、padding をつかうことで見出しにも応用する。
いちまいにまいつづき
スポンサーリンク
<div style="background-image:url('img/aaaa.png');background-repeat:no-repeat;height:75px;">
<p style="padding: 30px 0px 30px 80px;">
<span style="color:#ff0000;font-size:30px;">いちまいにまい</span>
<span style="color:#0000ff">つづき</span>
</p>
</div>
<div class="clr"></span>
[S: color:#cc0000;]※background-repeat:no-repeat を忘れずに！※表示上改行をいれているが、ワードプレスなど自動編集されるエディタを使っている場合は、
改行を取っ払った方が操作しやすい。[/S]
スポンサーリンク