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

2017年8月7日 | 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 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;
}