Loading...

Single Post

HOME > post > Column > 画像の上にテキストを表示させる方法

画像の上にテキストを表示させる方法

| Column, Web
ウェブポストイメージ画像

ウェブサイト制作時に画像の上にテキストやボタンをのせる事ってありますよね!!今回は、制作案件にてテキストを画像上にのせる素材を作りましたので、掲載させて頂きます。必要のある方は、コピペでご使用いただければと思います。

以前、背景画像の上にテキストを表示させるテクニックで「フルスクリーン画像とボックス中央配置」という記事を掲載させて頂きました。ご興味のあるかは、あわせて閲覧ください。

それでは、早速ソースを掲載させて頂きます。

HTML


<div class="main_wrap">
  <div class="full_area">
	<img src="images/music.jpg" alt="LOVE MUSIC" />
      <div class="text_area">
	<p class="sub_text">No Music No Life</p>
	<p class="main_text">LOVE MUSIC</p>
      </div>
   </div>
</div>

CSS


*, *:after, *:before {
	 -webkit-box-sizing:
	 border-box;
	 -moz-box-sizing:
	 border-box;
	 box-sizing:
	 border-box;
			
}
body, html { 
	 font-size: 100%;
	 padding: 0;
	 margin: 0;
	 font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

}
img{
	 width: 100%;
	 max-width: 100%;
	 width :auto;
	 height:auto;
	 vertical-align:bottom;
}
.main_wrap{
	 height:auto !important;
}
.full_area{
	 position: relative;
			
}
.full_area img{
         width: 100%;
}
.text_area{
         position: absolute;
         top: 50%;
         left: 50%;
         margin-top: -50px;
         margin-left: -100px;
}
.full_area .main_text{
	color: #fff;
	font-weight: bold;
	font-size: 36px;
	margin: 0;
	padding: 0;
}
.sub_text{
	color: #fff;
	font-weight: 100;
	font-size: 20px;
	margin: 0;
	padding: 0;
}

まとめ

難しくはない技術ですが、作るとなると少し労力を使わなくてはなりません。閲覧頂いた方々のお役に立てると幸いです。今回は、デモページに「おまけ」もご用意しておりますので、用途があればご自由にお使いください。テキスト部分をボタンなどにしても使えると思いますので、カスタムしてみてください!!

関連記事

Contact Page