LoginSignup
19
16

More than 5 years have passed since last update.

@szaizenin株式会社LIG

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

Last updated at Posted at 2018-04-10

はじめに

背景画像が明るくて文字が見にくい、もう少し落ち着いた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

参考サイト

19
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
19
16