そんな疑問にお答えします。
背景画像に文字を乗せた場合、見やすくするために背景画像を少し暗くしたい、そんなときってありますよね。
ここではその方法を２つ紹介します。
疑似要素を使う方法
See the Pen
背景画像を暗くする1 by toshi (@toshi78)
on CodePen.
コード解説
<div class="bg-image">
<p class="text">ハスキー</p>
</div>
CSS
.bg-image {
background: url(画像パス) no-repeat center center / cover;
width: 100%;
height: 100vh;
position: relative;
}background: url()で背景画像を表示させ、width: 100%;、height: 100vh;で画面いっぱいに表示します。
position: relative;にて中に入れる要素の基準値とします。
.bg-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.4);
}疑似要素(before)にbackground-color: rgba(0,0,0,0.4);を指定することによって半透明の黒いフィルターにします。
position: absolute;、top: 0;、left: 0;、right: 0;、bottom: 0;を指定します。
これによりフィルターが全体に広がり背景画像をぴったりと覆います。
background-image: linear gradientを使う方法
See the Pen
背景画像を暗くする2 by toshi (@toshi78)
on CodePen.
コード解説
CSS
.bg-image {
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(画像パス) ;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100vh;
}linear-gradient()はグラデーション画像を作るときに使うものと思いがちですが、開始と終了を同じ色にすることで単色を表現できます。
それを半透明にしたものをbackground-imageに記述します。
こうすることで背景画像を暗くすることができます。
疑似要素を使うよりもこちらの方が記述量が少なくて済みます。
また疑似要素を使った場合は文字を表示させるためにはposition: absolute;の指定が必要ですが、linear-gradient()では必要ありません。
使い勝手としてはこちらの方が簡単かもしれません。
以上です。
投稿者 トシ
コメントを残す