css - 是否有任何特定原因导致filter属性在根元素的background属性中不起作用？

Question

我已经确认filter属性的滤镜效果不适用于应用于background元素的html属性。我想知道此行为规范是否有基础。



filter元素中body属性的行为

在body元素中，我确认了filter属性使用以下代码将滤镜效果应用于background-color属性。

div {
  width: 100px;
  height: 100px;
  background-color: #000;
  border: #9f9 solid;
}

div.filtered {
  filter: invert(100%);
}

<div></div>
<div class="filtered"></div>

filter元素中html属性的行为

我期望与html元素的行为相同。

因此，我为background-color元素设置了border和html属性，如下所示：

html {
  background-color: #000;
  border: #9f9 solid;
}

当我为此CSS设置滤镜效果（invert）时，仅边框的颜色被反转，背景颜色不被反转。

html {
  background-color: #000;
  border: #9f9 solid;
  filter: invert(100%);
}

规范中滤镜效果的处理

根据Filter Effects Module Level 1，滤镜效果将在所有CSS效果之后应用。

这告诉我们滤镜效果也适用于background-color和background-image。


  §2.模块交互[1]
  
  合成模型遵循SVG合成模型[SVG11]：首先应用任何滤镜效果，然后应用任何修剪，遮罩和不透明度[CSS3COLOR]。这些效果都在其他任何CSS效果（例如边框[CSS3BG]）之后应用。


其次，该规范指出filter属性的滤镜效果会影响所有图形零件。

由此可见，即使filter属性的目标是html元素，也可以应用滤镜效果。


  §5.图形过滤器：过滤器属性[2]
  
  从概念上讲，图形的任何部分均受过滤器操作影响。这包括应用过滤器的元素及其后代的内容，背景，边框，文本装饰，轮廓和可见滚动机制。过滤器操作应用于元素的局部坐标系。




题

如上所述，我可以预期滤镜效果也将应用于html元素的背景。

但是，与规范不同，浏览器不会将滤镜效果应用于html元素的背景（尽管它确实适用于边框）。

此行为是否有任何规范依据？如果此行为是浏览器错误，为什么会触发它？

Answer 1

我认为通过阅读规范可以得出一致的结论，因此我将其发布为答案。但是，我不确定这是否正确，因此如果发现错误，请发表评论。



根据CSS Backgrounds and Borders Module Level 3，根元素的背景是画布的背景，并且背景绘制区域扩展为覆盖整个画布。


  §3.11.1。画布背景和根元素[1]
  
  根元素的背景成为画布的背景，并且其背景绘画区域扩展为覆盖整个画布。但是，任何图像的大小和位置都相对于根元素，就好像它们是为该元素单独绘制的一样。 （换句话说，背景定位区域是针对根元素而确定的。）根元素不会再次绘制此背景，即，其背景的使用值是透明的。


另外，根据Filter Effects Module Level 1，在应用所有CSS效果之后，将应用滤镜效果。因此，背景从上述根元素到画布的传播是在“应用滤镜效果之前”完成的。


  §2.模块交互[2]
  
  合成模型遵循SVG合成模型[SVG11]：首先应用任何滤镜效果，然后应用任何修剪，遮罩和不透明度[CSS3COLOR]。这些效果都在其他任何CSS效果（例如边框[CSS3BG]）之后应用。


而且只有背景传播到画布，没有提及滤镜效果。

因此，html元素的滤镜效果不会传播到画布，它仅适用于html元素。因此，滤镜效果不会应用于占据整个页面的背景，即画布的背景。