background-imgの明度変更

Question

参考サイト
上記のリンクのトップに表示される画像のように明度を設定したいのですが

.top-img{
  background-size:cover;
  background-image:url(img/img-top.webp);
  background-color:rgba(0, 0, 0, 0.6);
  filter:brightness(50%);

  height:540px;

  position:relative;
}

このようにコードを書くと画像範囲の文字ごと明度が下がってしまいます。
何か解決策はないでしょうか？

Answer 1

これはいかがでしょう？

要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。

backdrop-filter - CSS: カスケーディングスタイルシート | MDN

ただし、対応ブラウザに難があります。

CSS Backdrop Filter | Can I use... Support tables for HTML5, CSS3, etc

---

あるいは、疑似要素を使う方法もあります。

Apply a Filter to a Background Image | CSS-Tricks

---

こちらの質問を見て、勘違いしていたことに気づきました。
これではいかがでしょうか。

  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(img/img-top.webp);