@page background-image 取决于类？

Posted 2023-05-07

【中文标题】@page background-image 取决于类？

【英文标题】：@page background-image depending on class?

【发布时间】：2018-03-28 12:35:53

【问题描述】：

我在一个网站上有两个不同的页面/节点，我希望在我的 CSS 中为 background-image 设置不同的 @page 规则。我不是特别熟悉打印规则（尽管我每天都使用 CSS），因此我不确定如何完成此操作

我尝试将@page 与body.node-type @page 之类的东西放在一起，但这无济于事。这甚至可能吗，或者@page 不可能与类或 id 配对——在这种情况下，我该如何解决这个问题？

编辑，在下面尝试过，但也没有用：

body.node-type-reference
     @page 
    

我知道我也许可以将背景图像放在单独的 div 中，但这需要对代码进行重大修改，而且我什至不确定当溢出到第二页时这是否会很好（因为第一页在两种节点类型中都是唯一的）。

【问题讨论】：

为什么不在其中一个父 div 上给每个页面一个不同的类名？

我有，问题是如何使用@page 属性选择它？

由于缺乏更好的实现，我现在将@page 规则放在相关节点类型的

【参考方案1】：

您将无法仅在 @page 规则内执行此操作。 CSS 不支持条件 @page at-rules，其条件取决于标记内的匹配选择器。

正如您所发现的，这可以通过将特定的 @page at-rule 包含在嵌入您希望规则应用的页面中的 <style> 中来解决（假设您匹配的类在body 元素，通常表示特定于文档的样式）。

【讨论】：

啊，好吧。唯一的问题是我依靠一个模块从页面上的内容生成 pdf 文档，它只需要一个 print.css 文件。呃，看来我要进行一些重大的返工了。