質問: ### 前提 JavaScript - CSSでfilter要素を使ったのですが、背景にだけ適用されません。|teratail ↑この質問に関連してなのですが。 「`background-image`には`filter`が効かない」という回答があり、自分の認識と違ったので以下のコードで調べてみました。 ### 該当のソースコード ``` ``` ``` html{ filter: grayscale(100%); } body{ background-image: url(http://placehold.jp/24/cccc99/999933/200x100.png?text=body_background); filter: invert(1); } div{ background-image: url(http://placehold.jp/24/9999cc/333399/200x100.png?text=div_background); filter: blur(2px); } ``` 「`background-image`には`filter`が効かない」のであれば、div_backgroundには`blur`が効かないはずですが、実際には効きました。 しかし、body_backgroundには`invert`が効いていないので、これに関しては「`background-image`には`filter`が効かない」は正しいように見えます。 さらに、`html`に`grayscale`をかけたのですが、その子要素はbody_backgroundを除いて、スタイルが効いているように見えます。 ### 質問 1. 「`body`の`background-image`には一切`filter`が効かない」と解釈してよさそうなのですが、これは正しいでしょうか。 2. 1が正しいとすると、これはなぜでしょうか。仕様などで示していただけますと望ましいのですが、私的な解釈でもかまいません。 ### 補足情報 ChromeとFirefoxの最新版で確認しました。 ### BA選出後のまとめ 結局、はっきりとはわからなかったのですが、kei344さんからご指摘があったとおり、`filter`の他にも`transform`や`opacity`も効きませんでした。(`opacity`については透過した先に何もないということかもしれませんが。) 一方で、s8_chuさんのご指摘のとおり、仕様に従えば`filter`は効いてよさそうです。しかし、単純にバグだとすると、FirefoxとChromeで同じ振る舞いをしているのも気になります。 ちょっと気になるのは、CSS3のこの仕様です。 > > The root element does not paint this background again, i.e., the used value of its background is transparent. > > CSS Backgrounds and Borders Module Level 3 > > > (勝手訳:ルート要素は背景を再び塗ることはありません。つまり、ルート要素の背景は透明が使われるということです) `body`要素の背景は描画される際にカンバスの背景として取り扱われ、`body`要素の背景は`'transparent'`と見なされる、と考えれば、「そもそも`body`要素の背景ではなくなってしまうので、`body`要素へのCSSは効かない」と解釈でき、s8_chuさんのご指摘とも矛盾しないのかもなあ、などと思いました。
回答: 仕様的には下記でしょうか・・ * MDN:backdrop-filter ※もし既に確認されていたりお求めの情報がない場合はすみません。