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