そんな疑問にお答えします。
CSSで背景画像を暗くする場合、一番ポピュラーな方法は擬似要素を使う方法かと思います。
親要素に「position: relative;」を指定し、擬似要素 ::beforeに「position: absolute;」を指定。
そうすることで透過した黒を上から重ねるという方法です。
ググってみれば案の定そのような方法が上から並んでいます。
ですがコード量を考えると今回紹介する「background-image: linear-gradient」の方がよりシンプルに書けます。
では実際どのように記述するのかを見ていきましょう。
目次
background-image: linear-gradientを使って背景画像を暗くする
なぜlinear-gradientで背景画像を暗くすることができるのか？
そもそも「background-image: linear-gradient」とは線形グラデーションを指定する場合に使います。
だからいわゆるグラデーションを施したいときに使うものとして一般的には認識されています。
たとえば写真にグラデーションを重ねるグラデーションオーバーレイの表現にはこの「background-image: linear-gradient」が使われます。
下図はその一例です。
そしてこのときのコードは以下のように書きます。
background-image: linear-gradient(開始色, 終了色);この場合、開始色、終了色が違う色であるからこそグラデーションとなって表現されます。
逆にいえば、開始色、終了色を同じにすれば一色で表現できるということです。
さらに透過させたいのであればRGBAで指定すればいいということ。
これらをまとめると、RGBAで透過させた同じものを開始色、終了色に指定すれば背景画像を暗くするという表現ができるということです。
コード例
See the Pen
linear gradientで背景を暗くする by toshi (@toshi78)
on CodePen.
CSS
.background {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(../img/husky06.jpg);
background-size: cover;
background-position: center;
}
これで背景画像を暗くすることができます。
背景画像を暗くしてテキストを見やすく表示
テキストを見やすくするために背景画像を暗くするというパターンは多いです。
ではその例も見てみましょう。
See the Pen
linear-gradientで背景を暗くする2 by toshi (@toshi78)
on CodePen.
文字を表示させる場合、「background-image: linear-gradient」で記述するメリットがあります。
擬似要素 ::beforeを使っているときだと文字を表示させる際に「position: absolute;」の指定が必要です。
ですが「background-image: linear-gradient」だとその指定は必要ありません。
positionプロパティを使うことがないので、よりシンプルなコードのみで表現できます。
以上です。
投稿者 トシ
コメントを残す