HTMLの背景画像に透かしを入れる方法

HTMLの背景画像に透かしを入れる方法
- HTMLファイル (index.html)
- CSSファイル (styles.css)

以下は、HTMLの背景画像に透かしを入れる方法の例です。
HTMLとCSSを別ファイルに分けて記載します。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>透かしの背景画像</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-background">
    <div class="test-watermark">透かし</div>
  </div>
</body>
</html>

CSSファイル (styles.css)

.test-background {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  height: 100vh;
}

.test-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.5); /* 透かしの色と透明度 */
  pointer-events: none; /* 透かしの上のクリックを無効にする */
  user-select: none; /* 透かしのテキスト選択を無効にする */
}

この例では、背景画像に対して透かしテキストを中央に配置しました。
透かしは半透明の白色で、位置を中央に設定しています。