你能在打印中包含CSS背景滤镜吗？

Question

我正在处理一个页面，其中有一层作为下面内容的过滤器。

#filter {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  backdrop-filter: blur(10px);
}

<div id='filter'></div>
<h1>Some text</h1>

该页面旨在从浏览器中打印，但背景滤镜未应用（尽管其他固定元素显示正确）。是否有办法在打印时包括背景滤镜？已在Chrome和Safari上测试。

有关背景滤镜效果的更多信息，请参见此处

- Conrad Klek

Answer 1

我这里也遇到了同样的问题。当我们使用 chrome --headless 或 puppeteer 将 HTML 输出为 PDF 文件时，背景过滤模糊效果不会出现。

- Sylvain Tch

Answer 2

不，CSS Backdrop-Filters目前不支持打印。Backdrop-Filters是一种可以应用于元素的视觉效果，如模糊或颜色偏移。然而，这些效果与元素内容没有直接相关性，通常与文档的打印版本无关。

当网页被打印时，浏览器会生成一个针对纸张打印进行优化的打印布局。该布局通常会简化并去除非必要的元素，例如背景图片和视觉效果。虽然可以使用专门的打印样式将某些样式应用于文档的打印版本，但CSS Backdrop-Filters目前不支持。

因此，如果您想在文档的打印版本中应用视觉效果，您需要使用替代技术，例如创建单独的针对打印的特定样式，以实现所需的效果，或者使用打印专用样式表仅在文档被打印时应用样式。

- Aziz Saidi