どうやって作成する：画像のテキストブロック

画像にテキストブロックを配置する方法を学ぶ。

画像にテキストブロックを配置する方法

ステップ1 - HTMLを追加：

<div class="container">
  <img src="nature.jpg" alt="ノルウェイ" style="width:100%;">
  <div class="text-block">
    <h4>武漢</h4>
    <p>素晴らしい街です！大好きです！</p>
  </div>
</div>

ステップ2 - CSSを追加：

/* 画像とテキストを含むコンテナ */
.container {
  position: relative;
}
/* 右下角テキスト */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

自分で試してみる

関連ページ

チュートリアル：CSS画像

チュートリアル：CSS定位