神戸ホームページ制作プロ公式ブログ
3.82019
画像に文字を重ねる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 で文字のサイズを指定できます。






