Loading...

Single Post

HOME > post > News > フルスクリーン画像とボックス中央配置

フルスクリーン画像とボックス中央配置

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

仕事でフルスクリーン画像の上にテキストボックスを置き画面の中央に表示し、ボックスのバックグラウンドは透過しつつテキストは透過しないという作業がありましたので、備忘録にソースを掲載しておきます。

HTML下記掲載


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フルスクリーンで表示する方法</title>
</head>
<body>
  
<div class="content">
<h1 class="title">Puzzleのサンプルページへお越し頂きありがとうございます。</h1>
<p class="link"><a href="#">GO TO PUZZLE WEBITE →</a></p>
</div>
</body>
</html>

CSS下記掲載


html { 
	background: url(img/bg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
}

body {
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
	font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

h1 {
	font-size: 18px;
	font-weight: 100;
}
.content {
	 background-color: rgba(20,124,237,0.8);
	 text-align: center;
	 padding: 30px;

}
.title  {
         color: #fff;
}
.link a {
  	font-size: 14px;
  	color: #fff;
}
.link a:hover {
  	text-decoration: none;
}


まとめ

テキストエリア【.content】のバックグラウンドカラーを【rgbaプロパティ】で記述することが重要です。ここで【opacity】を使ってしまうとテキストまで透過されてしまいます。【rgba】と【opacity】について違いを詳しく知りたい方はこちらを参照ください。

関連記事

Contact Page