背景に透かし文字を入れるCSS作成

htmlで背景に透かし文字を入れる場合は、DIV要素を重ねて背面側のDIVに文字を埋め込みします。背面の透かし文字は少し透明にした方が見やすくなります。

アニメーションを利用した背景文字や画像を利用した繰り返し背景文字のサンプルも掲載しています。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="baseBox">
  <div class="backStr">sample</div>
  <div class="frontStr">CSSで背景に<br>透かし文字を<br>入れるサンプル</div>
</div>

<style type="text/css">
.str {
 /* --- 親BOXの定義 --------------------------------------------*/
.baseBox {
  display       : inline-block;         /* インラインブロック化 */
  position      : relative;             /* 親要素               */
  overflow      : hidden;               /* はみ出しは非表示     */
  margin        : 0 auto;               /* BOXの位置(中央寄せ)  */
  width         : 240px;                /* BOXの横幅            */
  height        : 160px;                /* BOXの高さ            */
  background    : #fff;                 /* BOXの背景色          */
}
 
 /* --- 前面文字の定義 -----------------------------------------*/
.baseBox .frontStr {
  display       : inline-block;         /* インラインブロック化 */
  position      : absolute;             /* 親要素からの相対位置 */
  padding       : 20px;                 /* BOX内の余白          */
  border        : 2px solid #999;       /* BOXの枠線            */
  font-size     : 18pt;                 /* 前景文字のサイズ     */
  font-weight   : bold;                 /* 太字                 */
  top           : 0;                    /* 親要素にサイズにする */
  left          : 0;
  right         : 0;
  bottom        : 0;
}
 
 /* --- 背景透かし文字の定義 -----------------------------------*/
.baseBox .backStr {
  position      : absolute;             /* 親要素からの相対位置 */
  display       : inline-block;         /* インラインブロック化 */
  white-space   : nowrap;               /* 折り返ししない       */
  font-size     : 40pt;                 /* 背景透かし文字サイズ */
  font-weight   : bold;                 /* 太字                 */
  color         : rgba(255, 102, 255, 0.8); /* 背景透かし文字色     */
                                        /* 中心寄せ＆角度       */
  top           : 50%;
  left          : 50%;
  transform     : translate(-50%, -50%)
                  rotate(-45deg);
}
</style>