質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

CSS について body 要素の background-image に filter が効かないのはなぜですか?

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,545

Lhankor_Mhy

score 18823

前提

JavaScript - CSSでfilter要素を使ったのですが、背景にだけ適用されません。|teratail
↑この質問に関連してなのですが。
background-imageにはfilterが効かない」という回答があり、自分の認識と違ったので以下のコードで調べてみました。

該当のソースコード

<img src="http://placehold.jp/24/99cc99/339933/200x100.png?text=body_child">
<div>
<img src="http://placehold.jp/24/cc9999/993333/200x100.png?text=div_child">
</div>
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);
}


https://jsfiddle.net/Lhankor_Mhy/9phjbnos/

background-imageにはfilterが効かない」のであれば、div_backgroundにはblurが効かないはずですが、実際には効きました。
しかし、body_backgroundにはinvertが効いていないので、これに関しては「background-imageにはfilterが効かない」は正しいように見えます。
さらに、htmlgrayscaleをかけたのですが、その子要素はbody_backgroundを除いて、スタイルが効いているように見えます。

質問

  1. bodybackground-imageには一切filterが効かない」と解釈してよさそうなのですが、これは正しいでしょうか。
  2. 1が正しいとすると、これはなぜでしょうか。仕様などで示していただけますと望ましいのですが、私的な解釈でもかまいません。

補足情報

ChromeとFirefoxの最新版で確認しました。

BA選出後のまとめ

結局、はっきりとはわからなかったのですが、kei344さんからご指摘があったとおり、filterの他にもtransformopacityも効きませんでした。(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さんのご指摘とも矛盾しないのかもなあ、などと思いました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s8_chu

    2019/07/10 23:50

    「『background-imageにはfilterが効かない』という回答」とは、どの回答を指していますか?どちらもそのような趣旨の回答に読めるので、念のため明確にしておきたいです。また、その回答をした人に直接コメントで尋ねてみても良いと思います。

    キャンセル

  • Lhankor_Mhy

    2019/07/11 13:41

    yambejp さんのご回答の方です。

    キャンセル

  • Lhankor_Mhy

    2019/07/11 13:44

    お二人に回答依頼をしてみました。

    キャンセル

回答 3

+3

「bodyのbackground-imageには一切filterが効かない」と解釈してよさそうなのですが、これは正しいでしょうか。 

Filter Effects Module Level 1 に基づけば、これは誤りだと思います。


まず、フィルタ効果はどのような CSS よりも後に適用されるものです。これより、フィルタ効果は背景画像に対しても影響を及ぼすと考えられます。

 § 2. Module interactions

The compositing model follows the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking and opacity [CSS3COLOR]. These effects all apply after any other CSS effects such as border [CSS3BG].

次に、同仕様書には filter プロパティによるフィルタ効果はすべての描画部位に影響を及ぼすという記述があります。ここから、filter プロパティの適用対象が文書のルート要素や body 要素であっても、フィルタ効果が適用されると考えることが出来ます。

 § 5. Graphic filters: the filter property

Conceptually, any parts of the drawing are effected by filter operations. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants. The filter operations are applied in the element’s local coordinate system.

以上のことから、「htmlbody 要素に適用された background-image プロパティでのみ、フィルタ効果が無視される」という挙動は、誤りだと思います。キャンバスの背景ならばともかく、html もしくは body 要素により適用された背景が filter プロパティの影響を受けないことには違和感があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/10 13:29

    なるほど。
    つまり実装上の誤り、ということですね。

    キャンセル

  • 2019/07/10 13:30 編集

    > つまり実装上の誤り、ということですね。
    はい、そのように考えています。

    ---

    用事があるので詳しく読んでいませんが、いくつかの issue から関連性のありそうなものを探したので、読んでみると何か新しいことがわかるかもしれません。

    https://bugs.chromium.org/p/chromium/issues/detail?id=591015
    https://bugs.webkit.org/show_bug.cgi?id=74886
    https://bugzilla.mozilla.org/show_bug.cgi?id=1165767
    https://github.com/w3c/fxtf-drafts/issues/282

    キャンセル

checkベストアンサー

+2

特に回答でも無いのですが、html要素にbackground-color or background-image が付いている場合、body要素も効いているようです。 

box-shadow や border をbody要素に設定した場合、grayscaleが効いています。
transform: scale(1.2); をbody要素に設定した場合、background-imageに影響がありませんでした。

例示されたコードを基にFirefox/Chromeで確認)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/08 17:03

    ありがとうございます。
    ・html要素に背景がある時は、通常の背景と同じ扱いになる
    ・他にも無効になるスタイルがありそう
    ということですか。

    キャンセル

  • 2019/07/08 17:20

    そうですね。filterは「後背にある要素との合成」のプロパティなので、(HTML要素を特殊な要素と捉えて)後背に要素が無いbody要素のbackground-imageには効かないのかなぁ、という感じです。
    あと、body要素の背景に設定しただけで、「(要素としてのHTML要素で無く)ページの背景」になる指定(規定)とかがあるかもしれませんね。

    キャンセル

  • 2019/07/08 17:25 編集

    ご回答を参考に調べてみた感じ、それっぽい記述を見つけました。
    https://www.w3.org/TR/CSS2/colors.html#background
    ( For HTML documents, のくだり)

    ただ、具体的な仕様はなさそう……?

    キャンセル

0

仕様的には下記でしょうか・・

※もし既に確認されていたりお求めの情報がない場合はすみません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/08 15:53

    backdropだし盛大に外した気がする。
    大変失礼しました。

    キャンセル

  • 2019/07/08 16:01

    なるほど。
    しかし、テストした Firefox では未実装のようですから、関係は薄いかもしれませんね……
    ちょっと Chrome でテストしてみます。

    キャンセル

  • 2019/07/08 16:02

    よろしくお願いします。
    私も結構気になっています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る