文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 透かし文字

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

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

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

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

透かし文字を変えてみよう

背景文字の角度とサイズ
角度
サイズ
背景文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
sample
CSSで背景に
透かし文字を
入れるサンプル
使用したhtml
<div class="baseBox">
  <div class="backStr">sample</div>
  <div class="frontStr">CSSで背景に<br>透かし文字を<br>入れるサンプル</div>
</div>
生成したCSS
<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>
ページTOP
広告
広告

色々な背景文字

背景(バックグランド)に画像を指定

backgroundに画像を指定すると、背景の透かし文字と同じ効果となります。

サンプルの画像は直接使用しないでください。文字を画像にする場合は以下のページをご利用ください。
文字/ボタンのイメージ画像作成【無料】

CSSで背景に
画像透かし文字を
繰り返し入れる
HTML
CSS
表示
CSSで背景に
画像透かし文字を
中心に入れる
HTML
CSS
表示
ページTOP

背景透かし文字をアニメーションで動かす

animetionを利用すると、背景の透かし文字を動かくこともできます。

社外秘
背景透かし文字を
アニメーションで
横折返しする
HTML
CSS
表示
DRAFT
背景透かし文字を
アニメーションで
サイズ変更する
HTML
CSS
表示
DRAFT
背景透かし文字を
アニメーションで
ブリンクする
HTML
CSS
表示
ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン