【5秒で完了】画像（イメージ）上に半透明の文字を重ねる方法【CSS】
画像（イメージ）上に半透明の文字を重ねる方法。けっこう便利なので、備忘録的にメモしておきます。
実装のイメージは以下。
※背景画像とテキストが別になっています。
メリットとしては、画像上のテキスト変更が簡単なのでサイト改善をする際に楽ですねー( ◜◡‾)
では、さっそく解説。
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を適意編集してください。
おわりー！
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。