CSS画像の上に文字を重ねる方法｜オーバーレイ・中央配置

画像の上に文字を重ねるデザインは、ヒーロー画像、バナー、カード、記事サムネイルなどでよく使います。

この記事では、CSSで画像の上に文字を重ねる方法を20パターンに分けて紹介します。中央配置、左下配置、暗いオーバーレイ、グラデーション、ホバー表示、スマホ対応まで、コピーして使いやすい形にまとめます。

1. 画像の中央に文字を重ねる

親を position: relative;、文字を position: absolute; にします。

<div class="image-overlay-center">
  <img src="https://placehold.co/800x450" alt="サンプル画像">
  <p>画像の上の文字</p>
</div>

.image-overlay-center {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-overlay-center img {
  display: block;
  width: 100%;
  height: auto;
}

.image-overlay-center p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

inset: 0; と place-items: center; で中央配置できます。

2. 暗いオーバーレイを重ねる

画像の上の文字を読みやすくするには、半透明の黒を重ねます。

.image-overlay-dark {
  position: relative;
  overflow: hidden;
}

.image-overlay-dark::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: rgba(0, 0, 0, 0.45);
}

.image-overlay-dark img {
  display: block;
  width: 100%;
}

.image-overlay-dark p {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
}

疑似要素より文字を前に出すため、文字側の z-index を大きくします。

3. 左下に文字を置く

記事カードやバナーでは、左下にタイトルを置く形もよく使います。

.image-overlay-bottom-left {
  position: relative;
  overflow: hidden;
}

.image-overlay-bottom-left img {
  display: block;
  width: 100%;
}

.image-overlay-bottom-left p {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

左下配置は、画像の暗い部分に文字を置きやすいのが利点です。

4. 右上にラベルを重ねる

NEWやカテゴリなど、小さなラベルを画像上に置く例です。

<div class="image-label-top">
  <img src="https://placehold.co/800x450" alt="">
  <span>NEW</span>
</div>

.image-label-top {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-label-top img {
  display: block;
  width: 100%;
}

.image-label-top span {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  background: #dc2626;
  border-radius: 4px;
}

ラベル単体のデザインは、CSSバッジ・ラベル・タグデザイン集 と内部リンクできます。

5. 下からグラデーションを重ねる

画像全体を暗くせず、下側だけ読みやすくしたい場合の方法です。

.image-gradient-bottom {
  position: relative;
  overflow: hidden;
}

.image-gradient-bottom::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 55%;
  content: "";
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.image-gradient-bottom p {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-weight: 700;
}

カードタイトルを下に置く場合は、グラデーションが自然です。

6. 文字に影を付ける

画像の色が複雑なときは、文字に影を付けるだけでも読みやすくなります。

.image-text-shadow {
  position: relative;
}

.image-text-shadow p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

影だけで読みにくい場合は、暗いオーバーレイも併用します。

7. 画像比率を固定する

バナーやカード一覧では、画像の比率を固定すると高さが揃います。

.image-ratio-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-ratio-overlay img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.image-ratio-overlay p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
}

aspect-ratio と object-fit で画像の見え方を整えます。

8. ヒーロー画像に文字を重ねる

ファーストビューの大きな画像に、見出しと説明文を重ねる例です。

<section class="hero-overlay">
  <img src="https://placehold.co/1600x900" alt="">
  <div>
    <h1>メインコピー</h1>
    <p>説明文が入ります。</p>
  </div>
</section>

.hero-overlay {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

.hero-overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay div {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  min-height: 420px;
  padding: 40px 20px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
}

ヒーローでは、文字量を詰め込みすぎない方が読みやすくなります。

9. ボタンを画像の上に重ねる

バナー画像の上にCTAボタンを置く例です。

<div class="image-button-overlay">
  <img src="https://placehold.co/800x450" alt="">
  <a href="#">詳しく見る</a>
</div>

.image-button-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-button-overlay img {
  display: block;
  width: 100%;
}

.image-button-overlay a {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 10px 16px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: #2563eb;
  border-radius: 6px;
}

ボタンの見た目は、CSSボタンデザイン集 と分けて扱えます。

10. ホバーで文字を表示する

カードにマウスを乗せたときだけ説明文を表示する例です。

.image-hover-caption {
  position: relative;
  overflow: hidden;
}

.image-hover-caption p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s;
}

.image-hover-caption:hover p {
  opacity: 1;
}

スマホではホバーが伝わりにくいため、重要な情報は常時表示も検討します。

11. ホバーで画像を暗くする

文字は常時表示し、ホバー時に画像だけ暗くする例です。

.image-hover-dark {
  position: relative;
  overflow: hidden;
}

.image-hover-dark img {
  display: block;
  width: 100%;
  transition: filter 0.2s;
}

.image-hover-dark:hover img {
  filter: brightness(0.65);
}

.image-hover-dark p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  font-weight: 700;
}

ホバー効果は、CSSホバーエフェクト集 にもつなげられます。

12. 画像上の文字を左寄せにする

見出しと説明文を左寄せで重ねる例です。

.image-text-left {
  position: relative;
  overflow: hidden;
}

.image-text-left .text {
  position: absolute;
  top: 50%;
  left: 32px;
  max-width: 420px;
  color: #fff;
  transform: translateY(-50%);
}

.image-text-left h2,
.image-text-left p {
  margin: 0;
}

文章量が多い場合は、横幅を制限すると読みやすくなります。

13. スマホでは文字を画像下に戻す

スマホで文字が読みにくい場合は、重ねずに下へ出す方法があります。

.image-overlay-responsive {
  position: relative;
}

.image-overlay-responsive .text {
  padding: 16px;
  color: #111827;
  background: #fff;
}

@media (min-width: 768px) {
  .image-overlay-responsive .text {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    color: #fff;
    background: transparent;
  }
}

画像上に文字を置くことより、読めることを優先します。

14. 背景画像として文字を重ねる

HTMLの img ではなく、CSSの背景画像として扱う方法です。

<div class="bg-image-overlay">
  <p>背景画像の上の文字</p>
</div>

.bg-image-overlay {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 32px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  background:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url("https://placehold.co/800x450") center / cover;
  border-radius: 8px;
}

装飾目的の画像なら背景画像、意味のある画像なら img を使います。

15. 画像上に半透明の白いパネルを置く

文字の可読性を上げたい場合は、文字だけをパネルに入れる方法もあります。

.image-panel-overlay {
  position: relative;
  overflow: hidden;
}

.image-panel-overlay .panel {
  position: absolute;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

文字が長い場合は、半透明パネルの方が読みやすくなります。

16. 画像全体をリンクカードにする

画像とテキスト全体をクリックできるカードにする例です。

<a class="image-link-overlay" href="#">
  <img src="https://placehold.co/800x450" alt="">
  <span>記事を読む</span>
</a>

.image-link-overlay {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

.image-link-overlay img {
  display: block;
  width: 100%;
}

.image-link-overlay span {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  font-weight: 700;
}

リンクの場合は、クリックできる見た目とテキストを用意します。

17. z-indexが効かないときの基本形

重なり順がうまくいかない場合は、親・画像・オーバーレイ・文字の層を分けます。

.image-z-index {
  position: relative;
}

.image-z-index img {
  display: block;
  width: 100%;
}

.image-z-index::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}

.image-z-index .text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
}

さらに困った場合は、z-indexが効かない原因 に内部リンクできます。

18. CSS変数でオーバーレイ濃度を変える

ページごとに暗さや文字色を変えたい場合の例です。

.image-overlay-variable {
  --overlay-color: rgba(0, 0, 0, 0.45);
  --overlay-text: #fff;

  position: relative;
  overflow: hidden;
}

.image-overlay-variable::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--overlay-color);
}

.image-overlay-variable p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--overlay-text);
}

画像の明るさに合わせて、--overlay-color を調整します。

19. テキストをclampでレスポンシブにする

画像上の大きな文字は、画面幅に合わせてサイズを変えると崩れにくくなります。

.image-fluid-text p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 5vw, 44px);
  font-weight: 700;
  text-align: center;
}

長い見出しは、文字サイズだけでなく行数も確認します。

20. 画像文字重ねの最小テンプレート

最後に、使い回しやすい最小セットです。

<div class="image-overlay-template">
  <img src="https://placehold.co/800x450" alt="">
  <div>
    <h2>タイトル</h2>
    <p>説明文が入ります。</p>
  </div>
</div>

.image-overlay-template {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-overlay-template img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.image-overlay-template::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.45);
}

.image-overlay-template div {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  color: #fff;
  text-align: center;
}

画像比率、暗いオーバーレイ、中央配置をまとめた基本テンプレートです。

画像上の文字が読みにくいときの対策

• 黒いオーバーレイを重ねる
• 下側だけグラデーションを入れる
• 文字に影を付ける
• スマホでは文字を画像下に戻す
• 画像の明るい部分に白文字を置かない

まとめ

CSSで画像の上に文字を重ねるには、親を position: relative;、文字やレイヤーを position: absolute; にするのが基本です。

文字の読みやすさを優先し、暗いオーバーレイ、グラデーション、テキスト影、スマホ時の配置変更を組み合わせると、実務でも使いやすいデザインになります。