More than 5 years have passed since last update.

画像ファイルの上に文字を書く方法

Last updated at 2018-07-26Posted at 2018-07-22

Q.画像ファイルの上に文字を書くことができるのか？

A.可能！例えば、下記のようにすればOK！

↓↓↓↓↓↓↓ あなたの記事の内容

HTML

───────
``` html:HTML
↑↑↑↑↑↑↑ 編集リクエストの内容
<div class="cover">
 <p>画像の上に文字を置くよ！</p>
</div>

↓↓↓↓↓↓↓ あなたの記事の内容

CSS

───────
``` css:CSS
↑↑↑↑↑↑↑ 編集リクエストの内容
.cover{
  background: url(img/bg.jpg);
  background-size: cover;
  height: 500px;
}

divにclassを定義して、
そのclassの中でbackground:url(パス);
としつつ、divでpを囲むとよし。

（実は、自分photoshopがいじれるので
Photoshopで写真の上に文字を追加してしまいたい気持ちにもなった。

とはいえ、例えば、ユーザが投稿したアイコンに名前を上に表示する場合などを考えると、Photoshopという手段は使えないから、こういうのは知っておくといいよね！）

最後まで読んでいただいてありがとうございました！
Twitterをフォローして応援してもらえると、もっと書く気になります！＼(^o^)／
https://twitter.com/pocket_ma_kun