作成方法：透明テキストの画像

CSSを使用して透明（半透明）背景のテキストを持つ画像を作成する方法を学びます。

透明な画像テキスト

ノルウェイ
見出し

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

実際に試してみる：

透明な画像テキストの作成方法

第1段 - HTMLを追加：

<div class="container">
  <img src="notebook.jpg" alt="ノートブック" style="width:100%;">
  <div class="content">
    <h1>見出し</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

第2段 - CSSを追加：

.container {
  position: relative;
  max-width: 800px; /* 最大幅 */
  margin: 0 auto; /* 中央に配置 */
}
.container .content {
  position: absolute; /* 背景テキストの位置 */
  bottom: 0; /* 底部に配置。top:0を使用して上部に固定 */
  background: rgb(0, 0, 0); /* バックアップ色 */
  background: rgba(0, 0, 0, 0.5); /* 透明度 0.5 の黒い背景 */
  color: #f1f1f1; /* 灰色テキスト */
  width: 100%; /* 全幅 */
  padding: 20px; /* 一定のインセット */
}

実際に試してみる：