画像の上に、文字を半透明で重ねて表示する方法をお伝えします。
具体的には、下記の画像をご覧ください。
画像の上に、半透明で文字が重なって表示されていますよね。
画像の上にこのような文字を
重ねて表示できます
ここでお伝えする方法は、画像を直接 編集するのではなく、HTMLとCSSを使って、画像の上に半透明の文字を重ねて表示させる方法です。
手軽に、簡単に実現することができるため、ぜひ活用してくださいね。
■ 画像の上に文字を半透明で重ねる方法の手順
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：画像を表示したい箇所に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、HTMLファイルに貼り付けてください。
|
なお、上記のソースを使うときは、「画像のファイル名」を変更してください。
現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。
また、文字は自由に変更することができます。
手順３：画像が表示されていることを確認する。
ホームページの表示を確認して、画像が表示されていることを確認します。
そして、画像の上に半透明の文字が表示されていたら、確認作業は完了です。
■ 【カスタマイズ方法】文字を表示する場所を変更する方法
CSSファイルを変更することで、文字の色や大きさ、文字を表示している枠の広さも自由に変更できます。
また、文字を表示する場所を変更するには、CSSファイルの下記の記述を変更します。
|
top: 0px;
left: 0px;
↓ ↓ ↓
top: 100px;
left: 80px;
|
上記のように、「top」の数値を変更することで、画像のトップからの位置（文字を表示する位置）を指定できますし、「left」の数値を変更することで、画像の左側からの位置を変更できます。
これについても、自由に変更してくださいね。
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
