画像の上にテキストやリンクを表示する

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

imgタグではなくbackground-imageを使って、画像の上にテキストなどを配置する方法です。

CSSの解説

<div class="img-content">
  <p>テキスト</p>
</div>

/* 画像背景の親要素 */
.img-content{
  position: relative; /*重要*/
  width: 450px;
  height: 300px;
  background-image: url("画像のURL");
  background-size: cover; /*背景画像を要素サイズに*/
}

/*** テキストを中央に ***/
.img-content p{
  position: absolute; /*絶対配置*/
  top:50%;
  left:50%;
  transform: translate(-50%,-50%); /*ずれ修正*/
  margin: 0; /*余白なし*/
  padding: 0;
}

div の背景に画像を指定して、その中に段落 p を配置します。

• 親要素 div に画像を表示
  • background-imageで背景に画像を指定
  • background-size: coverで背景のサイズを要素に合わせる
  • position: relativeで子要素の基点位置にする
• テキストの子要素 p を中央配置
  • position: absoluteで親要素を基準とした配置に
  • top: 50%, left: 50%で中央を始点に
  • transform: translate(-50%, -50%)で要素中央を中央点に持っていく

要素をセンタリングする方法

top: 50%、left: 50%で始点をセンターに合わせる。

要素の半分の幅・高さだけ移動させて、要素の中央をセンターに合わせる。

親要素の中央に揃える場合は、親要素にposition: relativeを指定して、揃えたい子要素にposition: absoluteを指定。

要素を親要素の中央に配置する（センタリング）方法はいくつかありますが、今回はposition: absoluteでセンタリングしています。その他の方法や詳しい解説はこちら。
CSSで要素を上下や左右から中央寄せする7つの方法

応用CSS

フィルターを重ねて視認性を上げる

画像と文字の明るさが近くて見にくい場合は、上からフィルターをかけて明度の差を大きくしましょう。

フィルターは疑似要素:beforeを使って画像と同じサイズで作成します。フィルターの色は背景色background-colorで、色の濃さをopacityで調整します。（もしくは背景を rgba 指定で）

白文字なら暗めに、黒文字なら明るめのフィルターに設定しましょう。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

なお、backdrop-filterを使用する方法もありますが、firefoxに対応していないのであまりおすすめしません。

画像の上にボタン

テキストをリンクにしたい場合は p タグを a タグに変更します。
同様のやり方で色々なものを画像の上に表示させることができるので、好きな組み合わせを試してみてください。

See the Pen 画像の上にボタン by チータツ (@cheese_fuji) on CodePen.