文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 画像に文字を重ねる

画像に文字を重ね合わせるCSSの生成

写真やイラストなどの画像に文字を重ね合わせる場合はCSSの「position」を使用すれば簡単に出来ます。
文字を半透明にすることで画像が透けて見える状態となります。

当ページでは画像に文字を重ね合わせるサンプルCSSを簡単操作で作成することが出来ます。
生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

画像に文字を重ねて見よう

作成されるCSSは、パーセント(%)位置で指定されますので、生成したサンプルCSSを利用すれば、大きな画像や小さな画像でもほとんど同じ位置に表示されます。

文字の位置
横位置
縦位置
背景の指定
文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
サンプル画像
文字重ね
使用したhtml
<div class="imgArea">
  <img src="img.jpg" style="max-width: 550px;width: 100%;height: auto;" alt="サンプル画像">
  <div class="over" id="makeImg">文字重ね</div>
</div>
生成したCSS
 /* --- 親要素 ------------------------ */
.imgArea {
  display    : inline-block;
  position   : relative;
  padding    : 0
}
 /* --- 文字BOX(子要素) ------------------ */
.over {
  position   : absolute;                   /* 親要素からの絶対位置 */
  box-sizing : border-box;
  white-space: nowrap;                     /* 折返しなし */
  display    : block;                      /* ブロック要素にする */
  width      : 100%;                       /* 親要素の幅に合わせる */
  color      : rgba(64, 64, 255, 0.80);    /* 文字色(透明度) */
  background : rgba(255, 255, 255, 0.50);  /* 背景色(透明度) */
  top        : 50%;                        /* 親要素からの上位置 */
  left       : 0;                          /* 親要素からの左位置 */
  text-align : center;                     /* 文字位置 */
  transform  : translateY(-50%);           /* 文字BOXの位置ずらし */
  padding    : 10px;                       /* BOX内の余白 */
  font-size  : 30pt;                       /* 文字サイズ */
  font-weight: bold;                       /* 太字 */
  line-height: 1em;                        /* 1行の高さ */
}
ページTOP
広告
広告

色々な画像の文字重ね

CSSの「animation」を使用することで、色々なブリンクを作成することができます。

文字スクロール

CSS3で追加された「animation」を使用すると、文字をスクロールすることもできます。文字数が多い場合はスクロールさせることですべての文字を表示することが出来るようになります。

スクロールについては以下をご確認ください。
文字スクロールのCSS作成

サンプル画像
文字重ね
<div class="makeImgArea">
  <div class="sample1Oya">
    <img src="../../image/shizen550.jpg" style="max-width: 550px;width: 100%;height: auto;" alt="サンプル画像">
    <div class="sample1"><span>文字重ね</span></div>
  </div>
</div>
<style type="text/css">
 /* --- 親要素 ------------------------ */
.sample1Oya {
  display    : inline-block;
  position   : relative;
  padding    : 0;
}
 /* --- 文字BOX(子要素) ------------------ */
.sample1 {
  position   : absolute;                   /* 親要素からの絶対位置 */
  box-sizing : border-box;
  display    : block;                      /* ブロック要素にする */
  width      : 100%;                       /* 親要素の幅に合わせる */
  color      : rgba(64, 64, 255, 0.80);    /* 文字色(透明度) */
  background : rgba(255, 255, 255, 0.50);  /* 背景色(透明度) */
  top        : 50%;                        /* 親要素からの上位置 */
  left       : 0;                          /* 親要素からの左位置 */
  text-align : center;                     /* 文字位置 */
  transform  : translateY(-50%);           /* 文字BOXの位置ずらし */
  padding    : 10px 0;                     /* BOX内の余白 */
  font-size  : 30pt;                       /* 文字サイズ */
  font-weight: bold;                       /* 太字 */
  line-height: 1em;                        /* 1行の高さ */
  overflow   : hidden;
}
.sample1 span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  animation   : sample1Anime 3s linear infinite;
}
@keyframes sample1Anime{
    0% { transform: translateX(0) }
  100% { transform: translateX(-100%) }
}
</style>
ページTOP

注意事項

フォントは使用するページ(html)により変わります。

ページTOP
広告
生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン