*

ウェッブ制作・パソコン

Width =px

ホーム > 変化を付ける小技 >
画像に文字や別画像を重ねる MENU 

画像の中に文字(テキスト)や別画像を重ねて表示する。

CSSに position:relative; & position:absolute; を使うのがポイントです。

背景画像

別画像

画像に文字入れ!

1.html

  • 行番
  • 説 明
  • 1
  • 背景画像とその中に重ねる入れ子画像と文字列を1つのボックス(親)として、親ボックスに、「posision:relative」と設定する。
  • 2-4
  • 背景画像の中央寄せと%サイズ指定
  • 5
  • 入れ子画像 下記cssの ireko_gazo 参照
  • 6
  • 重ねる文字列 下記cssの ireko_char 参照

2.css

  • 行番
  • 説 明
  • 2-4
  • 画像に position:absolute; を指定。重ねる文字列の位置指定の起点は左上頂点で、通常はpxで指定しますが、この指定ではレスポンシブ対応ページにうまく表示出来ないため、%指定にしています。
  • 5-7
  • 文字列の修飾。
  • 9-11
  • 画像にposition:absolute; を指定し、左からと上からの位置の指定(%で指定)
  • 12-13
  • 大きめの画像をアップしたため、小さめに指定。そのため高さheightの指定は必須。サイズを画面表示サイズでアップすれば、ここは不要。
  • 14-
  • レスポンシブ対応用に、文字サイズや入れ子画像の位置調整

☆ 補足:入れ子にする画像は、透過するタイプにします。この例では、透過GIFです。