7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSで背景画像を暗くするときは、擬似要素 ::beforeではなく、background-image:linear gradientを使ったほうが便利!

Last updated at Posted at 2021-07-08

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を使った場合の背景画像
FireShot Capture 001 - Text Slide - 127.0.0.1.png
background-imageプロパティに linear-gradient を設定したとき
FireShot Capture 002 - Text Slide - 127.0.0.1.png

透過率はともに 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を読み込むべき。



7
3
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
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?