Written by Manabu Bannai

【5秒で完了】画像(イメージ)上に半透明の文字を重ねる方法【CSS】

CSS PROGRAMMING

画像(イメージ)上に半透明の文字を重ねる方法。けっこう便利なので、備忘録的にメモしておきます。

実装のイメージは以下。

※背景画像とテキストが別になっています。
gazou-top

メリットとしては、画像上のテキスト変更が簡単なのでサイト改善をする際に楽ですねー( ◜◡‾)

では、さっそく解説。

HTMLは以下を例とします。

<div id="img-box">
    <img src="img/top.jpg"/>
    <div id="img-box-mini"><p  id="img-box-text">ここの文字が画像に重なる</p></div>
</div>

上記HTMLに対して、以下のCSSをコピペすれば完了!!

#img-box{
  position: relative;
}
#img-box-mini{
  position: absolute;
  bottom: 20px;
  left: 0px;
  width:100%;
   color: #fff;
 }
#img-box-text{
  text-align: center;
  width: 100%;
}

特定画像のみに適用したい場合はCSSを適意編集してください。
おわりー!

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。