仕事でフルスクリーン画像の上にテキストボックスを置き画面の中央に表示し、ボックスのバックグラウンドは透過しつつテキストは透過しないという作業がありましたので、備忘録にソースを掲載しておきます。
<!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>
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】について違いを詳しく知りたい方はこちらを参照ください。