HTML&CSS rgbaを使って背景画像を暗くする

はじめに

背景画像が明るくて文字が見にくい、もう少し落ち着いたWebサイトにしたい、といったときに透過度を使った要素を作り、上に重ねて暗くする方法があります。
少し苦戦したのでここにまとめます。

rgbaを使って背景画像を暗くする

スクリーンショット 2018-04-10 20.59.31.png

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

参考サイト

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.