2013/12/14 (更新日: 2016/11/08)

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

CSS PROGRAMMING

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

実装のイメージは以下。

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

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

では、さっそく解説。

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を適意編集してください。
おわりー！

CSS

• Tweet
• LINE
• Read Later