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

ブロガー向け:シンプルで美しいWordPressテーマを販売しています

» ミニマリスト向けのWordPressテーマ『Minimal』を作りました

おすすめ: SEOで最も重要な『キーワード選定方法』をまとめました。

» SEOキーワード選定する方法。具体的に5つの手順で解説します。