画像の上に文字を半透明で重ねて表示する方法【コピペで可能】

画像の上に、文字を半透明で重ねて表示する方法をお伝えします。

具体的には、下記の画像をご覧ください。
画像の上に、半透明で文字が重なって表示されていますよね。

画像の上にこのような文字を
重ねて表示できます

ここでお伝えする方法は、画像を直接編集するのではなく、HTMLとCSSを使って、画像の上に半透明の文字を重ねて表示させる方法です。

手軽に、簡単に実現することができるため、ぜひ活用してくださいね。

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：画像を表示したい箇所に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、HTMLファイルに貼り付けてください。

なお、上記のソースを使うときは、「画像のファイル名」を変更してください。

現在は、「gazou.jpg」にしていますけど、この画像のファイル名を、表示させたい画像のファイル名に変更するという形です。

また、文字は自由に変更することができます。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル（index.htmlファイルなど）と同じ場所に、画像ファイルを保存するようにしてください。

手順３：画像が表示されていることを確認する。

ホームページの表示を確認して、画像が表示されていることを確認します。
そして、画像の上に半透明の文字が表示されていたら、確認作業は完了です。

CSSファイルを変更することで、文字の色や大きさ、文字を表示している枠の広さも自由に変更できます。

また、文字を表示する場所を変更するには、CSSファイルの下記の記述を変更します。

top: 0px;
left: 0px;

↓　↓　↓

top: 100px;
left: 80px;

上記のように、「top」の数値を変更することで、画像のトップからの位置（文字を表示する位置）を指定できますし、「left」の数値を変更することで、画像の左側からの位置を変更できます。

これについても、自由に変更してくださいね。

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。

「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。

【よく読まれている関連記事】

ホームページについて、次のステップへ

自分で作りたい方、制作をお願いしたい方、作成スキルを仕事にしたい方へ。
目的に合わせてお選びください。

仕事にしたい

ホームページ作成を仕事にしたい方へ

AIを活用してホームページを作り、そのスキルを仕事や収入につなげたい方のための講座です。

作ってほしい

ホームページを作ってほしい方へ

「自分で作るのは難しい」という方へ。分かりやすく使いやすいホームページを、低価格で制作しています。

自分で作りたい

自分でホームページを作ってみたい方へ

初心者向けのホームページテンプレートをご用意しています。ホームページを作りながら、自分で作れる力を身に付けたい方におすすめです。

画像の上に文字を半透明で重ねて表示する方法