backdrop-filterが反映されません

Question

.top-img{
  background-size:cover;
  
  
  background-image:url(img/img-top.webp);
  backdrop-filter:url(img/img-top.webp) brightness(60%);

  height:540px;

  position:relative;
}

背景画像の明度を変更するために
background-filterの使い方をMDNで確認し実践してみたのですが、うまいこと反映されません。
間違ってる部分や足りない部分があったら教えて欲しいです。

Answer 1

本題とは関係ありませんが、.webpは対応がかなり不完全なので、閲覧端末・環境からのアクセスに絞れる場合を除き使わないのが吉です。

Answer 2

ブラウザの設定は変えましたか？

【backdrop-filter - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter#Browser_compatibility

Chrome
From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Firefox
From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Comments

[sshino]

Chromeをつかっていますが、バージョンは８３で最新版です

[kei344]

バージョンだけでなく、Chromeであればchrome://flags.についてを回答しています。