background-image: linear gradient

CSSで背景画像を暗くするとき、ネット上では擬似要素 ::before を使って背景を暗くする実装をよく見かける。

<div class="banner">
</div>

上記のようなHTMLがあった場合に、

.banner {
  width: 100%;
  height: 100vh;
  background:url(img/background.png);
  background-size: cover;
  background-position: center;
  position: relative;
}

.banner::before{
  background-color: rgba(0,0,0,0.85);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

banner要素に背景画像を指定し、
擬似要素 ::before で透過した黒を上から重ねるようにする。
これがよくネットで見かける背景画像を暗くしてその上に文字を載せる実装である。

今回は、擬似要素を使わずに background-image:linear gradient
を使って、以下のような実装にしてみた

.banner {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.85)),url(img/background.png);
  background-size: cover;
  background-position: center;
  position: relative;
}

擬似要素 ::berofeを使った場合の背景画像

background-imageプロパティに linear-gradient を設定したとき

透過率はともに 0.85とした。同じような画像が得られた。

linear-gradientを使ったほうがよいメリット

文字を表示させるときに手間がかからない。

<div class="banner">
    <h1> Example Test </h1>
</div>

というように背景画像に対して文字を表示した状況の場合。

擬似要素を使った場合、文字を表示させるには、
position:absolute を指定しなければいけない

.banner h1{
  color: #fff;
  position: absolute;
}

ただ、擬似要素を使っていない時は

.banner h1{
  color: #fff;
}

positionプロパティを設定しなくても構わないのでソースコードを削減できる。

感想

MDN でもbackground-imageに linear-gradientを
使う実装が紹介されていたので、もっとMDNを読み込むべき。