【CSS】画像の上に文字を重ねる・重ねた文字を読みやすくする方法

画像の上に文字を重ねる・重ねた文字を読みやすくする方法

画像の上に文字を重ねて表示させたいときがあると思います。例えば、製品画像に製品名を載せたい場合などです。この時に画像に直接文字を重ねるのではなく、文字の背景に4分の1の円(四分円)を用いることで、画像と文字との間にデザインを加えて文字を読みやすくしたいと思います。

下の画像のように、左上に4分の1の円(四分円)を重ねて更にその上に文字を重ねます。

サンプルコード

HTML

<div class="radius">
  <img src="xxxx.jpg">
</div>

HTML解説

画像を div タグで囲みます。これは img タグが置換要素(コンテンツ自身をスタイルによって変更できない要素)であり、疑似要素を適用することができないためです。
よって、CSS では親要素である div タグに疑似要素を指定することになります。

CSS

.radius {
  position: relative;
}
/* 4分の1の円 */
.radius:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 0 0 100% 0; /* 左上 | 右上 | 右下 | 左下 */
  background: #6495ed;
  opacity: 0.7;
}
/* 画像に重ねる文字 */
.radius:after {
  content: "商品名";
  position: absolute;
  top: 25px;
  left: 15px;
}

CSS解説

.radius {
  position: relative;
}

画像の親要素である div タグに position: relative を指定します。後述の CSS で指定する position: absolute の起点を親要素にするためです。

.radius:before {
  content: "";
  position: absolute;
  width: 50px
  height: 50px;
  border-radius: 0 0 100% 0; /* 左上 | 右上 | 右下 | 左下 */
  background: #6495ed;
  opacity: 0.7;
}

4分の1の円を描く CSS では、疑似要素に position: absolute を指定することで、画像左上が起点になります。
次に、幅と高さが 50px の正方形について、右下の角を丸めます(border-bottom-right-radius と同義)。この場合、要素の幅と高さの 50px に対する 100％ つまり、半径が 50px の円を描いたときの角の丸めが行われます。

.radius:after {
  content: "商品名";
  position: absolute;
  top: 25px;
  left: 15px;
}

文字を配置する CSS では、 content に配置したい文字を設定します。
また、4分の1の円を描く CSS と同様に、position: absolute を指定して画像左上を起点とします。最後に文字の位置を調整します。