神戸ホームページ制作プロ公式ブログ

画像に文字を重ねるcss

画像に文字を表示する方法としては、フォトショップなどのソフトを使う方法がありますが、cssを使って文字を表示させることもできます。そうすればcssの編集だけで文字を変更できますので、非常に便利です。


1.画像と文字を1つのdiv要素の中に入れます

<div class="tnjmoji">
  <img src="文字を重ねる画像.jpg" />
  <p>重ねたい文字</p>	
</div>

2.cssを記述します

.tnjmoji{
  position: relative;/*相対位置への配置を指定します*/
  }

.tnjmoji p {
  position: absolute;/*絶対位置への配置を指定します*/
  color: white;/*白を指定しています*/
  top: 0;
  left: 0;
  }

  • 白を指定していますが、画像とのバランスを考慮して色を変えてください。
  • top には画像の上からの位置を指定してください。
  • left には画像の左からの位置を指定してください。
  • font-weight で文字の太さを指定できます。
  • font-size で文字のサイズを指定できます。
ページ上部へ戻る