Zenn
💻

CSSで背景画像をうっすら白く/黒くする一番簡単な方法

2020/03/09に公開
CSS
tech

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枚かませるという方法になる
GitHubで編集を提案

Discussion