はじめに
背景画像が明るくて文字が見にくい、もう少し落ち着いたWebサイトにしたい、といったときに透過度を使った要素を作り、上に重ねて暗くする方法があります。
少し苦戦したのでここにまとめます。
rgbaを使って背景画像を暗くする
html
<body>
<div class="back">
<div>
<h1>パソコン教室</h1>
<p>Learn together!</p>
</div>
</div>
</body>
css
body{
height: 100%;
margin: 0;
}
.back{
/* 画面いっぱいに背景画像を貼り付ける */
background: url(http://simplemodern-interior.jp/knowledge/wp-content/uplads/2014/07/pc.png) no-repeat center;
background-size: cover;
position: relative;
height:100%;
}
.back::before{
/* 透過した黒を上から重ねるイメージ */
background-color: rgba(0,0,0,0.4);
/* 自由に位置指定 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
このように背景画像を適用させたdivの擬似要素に、薄めた黒の背景色を適用させ、背景画像に重ねて暗くする方法です。
background-color: rgba(0,0,0,0.4);
の部分は、以下の記述方法でもできます。
.back::before{
background-color: black;
opacity: 0.4;
}
また、擬似要素を使う場合、contentを使わないと中身がないとみなされて何も表示されないようです。
文字のみ暗くせずに見やすくする
こちらは次回の記事を参照
「HTML&CSS 重なり順を指定する」
https://qiita.com/szaizen/items/16a01ccfa05280cf8853
参考サイト
- 画像を暗くしてみる
http://pilgrim-guild.com/background-darken/ - CSSだけで背景写真のみを暗くする
http://glatchdesign.com/blog/web/css/532