Zenn
🌁

画像をぼかして、おしゃれに文字を重ねる方法【CSS】

2020/12/12に公開2件
CSS
HTML
tech

Webアプリを作っていると画像にテキストを重ねるのをよく見かけると思います。たとえば、タグや値段を画像に乗せたりとかは多いのではないでしょうか。
実際、zennのBooksの表示も画像に値段のテキストを重ねています。

なので今回は画像にテキストを重ねる方法について解説していきます。

画像の上にテキストを重ねる方法

まずは、以下のように画像の左上にテキストを表示させます。

HTML

<div class="over-image">
  <img src="/winter.jpg" />
  <p>雪</p>
</div>

CSS

/* 画像の設定 */
.over-image {
  position: relative;  /* 通常の表示位置に対して相対的な位置を設定する */
  width: 300px;        /* 画像の幅 */
  margin : 50px auto;  /* 画像の中央寄せ */
}

/* テキストの設定 */
.over-image p {
  position: absolute; /* 親要素の表示位置に対して絶対的な位置を設定 */
  color: red;         /* 文字の色 */
  top:0;              /* 親要素の上部からの位置 */
  left:0;             /* 親要素の左部からの位置 */
  margin: 0;
}

.over-image img {
  width: 100%;        /* 画像自体の幅 */
}

ポイントとなるのはpositionプロパティの設定です。

全体を取りまとめるdiv要素にposition:relative;を設定し、本来表示すべき場所からの位置を設定します。

そして、テキストの要素であるpタグにはposition:absolute; top:0; left:0;を設定。これにより、親要素であるdivの表示位置と同じ位置にセットできます。

このような設定をすれば、左上にテキストが表示されるはずです。

テキストを中央に表示する

次に、テキストを中央に配置する方法を紹介します。

CSS

/* 画像の設定 */
.over-image {
  position: relative;     /* 通常の表示位置に対して相対的な位置を設定する */
  width: 300px;           /* 画像の幅 */
  margin : 50px auto;     /* 画像の中央寄せ */
  }

/* テキストの設定 */
.over-image p {
  position: absolute; /* 親要素の表示位置に対して絶対的な位置を設定 */
  color: red;         /* 文字の色 */
  top:50%;            /* 親要素の上部からの位置 */
  left:50%;           /* 親要素の左部からの位置 */
  -ms-transform: translate(-50%,-50%);      /*テキスト半分の長さ上部・左部に移動 */
  -webkit-transform: translate(-50%,-50%);  /*テキスト半分の長さ上部・左部に移動 */
  transform: translate(-50%,-50%);          /*テキスト半分の長さ上部・左部に移動 */
  margin:0;
  padding:0;
}

.over-image img {
  width: 100%;            /* 画像自体の幅 */
}

まずはtop、leftプロパティを使うことで、画像の左上から50%の位置に画像を表示させます。これだけだと以下のように、テキストの表示位置が真ん中に来ただけ、センタリングはされていません。

このずれを直してテキストを中央に寄せるために、transform属性を使います。
transformは回転、拡大縮小、傾斜、移動することができるプロパティです。translate関数で要素の表示位置を移動させることが可能で、第1引数がX軸方向、第2引数がY軸方向を設定できます。この引数に-50%を渡すことでpタグのサイズの半分の長さ分、移動させています。

これによりテキスト全体が画像の真ん中に表示されるのです。

ちなみに、transformの前についている-ms-や-webkit-はベンダープレフィックスと呼ばれており、使っているブラウザを識別するためのものです。-msはマイクロソフト、-webkitがchromeを指しています。

ベンダープレフィックスを指定することで、それぞれのブラウザに合った機能を実装することが可能となります。

画像にぼかしを入れる

このままでは背景画像がハッキリしすぎてテキストがあまり目立っていません。画像とテキストのコントラストをつけるためにぼかしを入れていきます。

CSS

/* 画像の設定 */
.over-image {
  position: relative;     /* 通常の表示位置に対して相対的な位置を設定する */
  width: 300px;           /* 画像の幅 */
  margin : 50px auto;     /* 画像の中央寄せ */
  }

/* テキストの設定 */
.over-image p {
  position: absolute; /* 親要素の表示位置に対して絶対的な位置を設定 */
  color: red;         /* 文字の色 */
  top:50%;            /* 親要素の上部からの位置 */
  left:50%;           /* 親要素の左部からの位置 */
  -ms-transform: translate(-50%,-50%);      /*テキスト半分の長さ上部・左部に移動 */
  -webkit-transform: translate(-50%,-50%);  /*テキスト半分の長さ上部・左部に移動 */
  transform: translate(-50%,-50%);          /*テキスト半分の長さ上部・左部に移動 */
  margin:0;
  padding:0;
}

.over-image img {
  width: 100%;            /* 画像自体の幅 */
  -ms-filter: blur(2px);  /* ぼかしの設定(マイクロソフト) */
  filter: blur(2px);      /* ぼかしの設定 */
}

ぼかしをつける方法は簡単です。filter属性にblur関数を設定するだけです。blurの引数はぼかしの半径を表しており、値が大きいほどぼかしが強くなります。

まとめ

  • 画像にテキストを重ねるには親要素のdivにposition:relativeを子要素のpタグにposition:topを設定する
  • 画像に重ねる文字を中央に寄せるにはtop:50%、left:50%でtransform: translate(-50%, -50%)の設定が必要
  • テキストを目立たせるために画像をぼかすのが有効。filter: blur(ぼかしの大きさ)を設定すれば綺麗にぼかせる。

参考

画像の上におしゃれに文字やボタンをのせる方法（CSS）

MDN blur

Discussion

catnosecatnose

情報ありがとうございます。「テキストを中央に表示する」のCSSにしれっとms用のぼかしの設定だけ入ってしまっているかも・・・・・？