画像の上にテキストを乗せる


スポンサーリンク

いちまい  にまい。そして、つづき

 
  • background-image で画像を指定。
  • background-repeat を no-repeat にして繰り返しを抑制する。
  • 画像にあわせて height を指定する(画像サイズ)。
  • 内側に入るブロックは p タグでくくる。
  • pタグの padding で上下位置を合わせる。
  • 左右の位置も padding で調節する。
<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>
※background-repeat:no-repeat を忘れずに!
※表示上改行をいれているが、ワードプレスなど自動編集されるエディタを使っている場合は、
改行を取っ払った方が操作しやすい。
 
 
 
これは、基本的に見出しなどの原理と同じで、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>
※background-repeat:no-repeat を忘れずに!
※表示上改行をいれているが、ワードプレスなど自動編集されるエディタを使っている場合は、
改行を取っ払った方が操作しやすい。

スポンサーリンク