💻
CSSで背景画像をうっすら白く/黒くする一番簡単な方法
CSSで背景画像をうっすら白く/黒くする一番簡単な方法をご紹介します。
つまり、
これを
こうする方法です。
ググるとよく出てくる方法
ググると「背景画像とテキストの間に半透明のレイヤーを1枚かませる」という方法ばかりが出てきます。
具体的には以下のような方法ですね。
#target {
background-image: url('../images/bg.jpg');
position: relative;
z-index: 0;
}
#target:after {
content: '';
background-color: rgba(#fff, 0.7);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
#target p {
z-index: 2;
}
-
#target
に背景画像を指定 -
#target:after
に半透明の背景色を指定して#target
と同じサイズに -
#target
#target:after
#target p
それぞれにz-index
を適切に設定し、上下関係を明示
ということをしています。もちろんこれでも意図した表現が可能です。
background-blend-mode
を使う
もっと簡単な方法: しかし、 現代においてはもっと簡単な方法が存在します。
それは、 background-blend-mode
プロパティ を使う方法です。コードとしては以下のようになります。
#target {
background-image: url('../images/bg.jpg');
background-color: rgba(#fff, 0.7);
background-blend-mode: overlay;
}
とっても簡単ですね!
下表のとおり、IE以外の主なブラウザで対応済みのプロパティなので、IEを捨てられるならこの方法のほうがコードもシンプルで楽ですね。
ちなみに、背景画像を暗くしたい場合は、以下のように背景色と前面のテキストのフォント色を変えればOKです。
#target {
background-image: url('../images/bg.jpg');
background-color: rgba(#000, 0.7);
background-blend-mode: overlay;
}
#target p {
color: #fff;
}
まとめ
- 背景画像をうっすら白く/黒くしたい場合は、
background-blend-mode
プロパティを使うと簡単 - ただしIEだけは未対応の機能なので、IEを切れない場合は
z-index
を駆使して背景画像とテキストの間に半透明のレイヤーを1枚かませるという方法になる
Discussion