CSSのfilterは背景だけを変えたいときに文字と要素を分けて指定する

背景画像を暗くしたいだけなら、見出しやボタンを入れた親要素へfilterを指定しないでください。filterは、その要素と子要素をまとめて描画した結果へ効果を加えます。親要素へbrightness()やgrayscale()を指定すると、文字、画像、リンクも同じように変わります。

背景だけを変えるなら、背景用の要素と本文用の要素を分け、filterは背景用だけへ指定します。見た目を変える指定と、読ませる内容を同じ箱へ入れないことが、後の修正も楽にします。

filterは子要素を含んだ見た目に作用する

Filter Effects Module Level 1は、filterが対象要素とその子孫要素を一つのgroupとして描画し、その結果へeffectを加えることを説明しています。filterは要素のCSS boxの寸法を変えませんが、描画された内容全体に影響します。

たとえば、写真の上に白い見出しと申込buttonを重ねた見出し部分を考えます。親要素へfilter: brightness(.6)を指定すれば、写真だけでなく白い文字とbuttonも暗くなります。写真を読みやすくするために入れた指定が、本文を読みにくくします。

背景用の要素を分ける

背景画像と本文を別の要素へ置くと、効果の対象を限定できます。次は構造を示す例です。実在siteのHTMLではありません。

<section class="hero">
  <div class="hero-image" aria-hidden="true"></div>
  <div class="hero-content">
    <h1>商品の案内</h1>
    <a href="/contact/">お問い合わせ</a>
  </div>
</section>

.hero {
  position: relative;
}

.hero-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("hero.jpg");
  background-size: cover;
  filter: brightness(.6);
}

.hero-content {
  position: relative;
}

この形なら、filterは.hero-imageだけに掛かります。.hero-contentの文字色やbuttonは別に描画されるため、背景を暗くしても指定した色を保てます。

背景用の要素をposition: absoluteで置く場合は、本文の親要素にposition: relativeを指定し、背景が本文より前面に出ないことを確認します。画像の見た目を直したつもりで、リンクを押せなくしては意味がありません。

暗い膜を重ねる方法とは使い分ける

写真を暗くして文字を読ませたいだけなら、filterではなく半透明の色を重ねる方法もあります。写真の明るさそのものを変えず、その上に暗い膜を置く方法です。この場合も、膜と本文を別に置きます。

.hero:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .35);
  content: "";
}

.hero-content {
  position: relative;
}

filter: brightness()は、写真そのものの明るさを下げる。半透明の色は、写真の上に別の色を重ねる。どちらを選んでも、親要素へまとめて指定すれば文字とbuttonまで影響を受ける。目的が文字を読める状態にすることなら、効果の種類より先に、どの要素へ指定するかを決める。

背景画像だけを暗くしたあと、文字が読みにくいからと親要素のopacityを下げるのは逆の修正である。opacityも親要素と子要素をまとめて薄くするため、文字とbuttonの色が弱くなる。背景の処理、文字色、操作部品の見え方を別々に調整する。

色の指定と画像の処理を分けて確認する

filterを使う目的は、写真をきれいに加工することではなく、文字と操作を読める状態にすることです。暗くする量を決める前に、次の順で確認します。

1. 見出しと本文を、背景なしでも読める色にする。
2. 背景画像だけへfilterを指定する。
3. 明るい写真と暗い写真の両方で、文字とbuttonが読めるか確かめる。
4. マウス操作とキーボード操作で、リンクを選べるか確かめる。

filterは新しいstacking contextを作る場合があります。重なり順が複雑な部分へ追加すると、前後関係が変わって見えることがあります。見出し部分だけで済ませず、重ねた画像、menu、popupがある画面では、それぞれの表示と操作を確認してください。

最初の一手は、filterを指定している親要素を一つ探し、文字やbuttonを子要素として含んでいないかを見ることです。含んでいるなら、背景と本文を分けてから色を調整します。