如何根据类为不同页面设置@page背景图片？

嘿，我明白你的困惑了——@page规则确实有点特殊，和我们平时写的普通CSS选择器逻辑不太一样，你之前尝试的body.node-type @page{}这类嵌套写法确实行不通，原因在于@page的语法限制：

@page是CSS中的顶层at-rule，它不能被嵌套在任何元素选择器（比如body、div这类）的作用域里，浏览器会直接忽略这种不符合规范的写法。

不过别担心，我们可以用CSS自定义属性（也就是变量）来解决这个问题，这是目前最可靠的方法，步骤如下：

1. 给不同页面的添加专属类名 #

首先确保你的两个页面的标签已经有了独特的类名（比如你提到的node-type-xxx），比如：

• 页面1的body：<body class="node-type-product">
• 页面2的body：<body class="node-type-blog">

2. 用自定义属性定义不同页面的背景 #

针对每个页面的body类，定义对应的打印背景变量：

/* 产品页的打印背景 */
body.node-type-product {
  --print-bg: url('path/to/product-print-bg.jpg');
}

/* 博客页的打印背景 */
body.node-type-blog {
  --print-bg: url('path/to/blog-print-bg.jpg');
}

3. 在@page规则中引用变量 #

最后在全局的@page规则里，使用自定义属性来设置背景，同时补充必要的背景属性：

@page {
  /* 引用对应页面的背景变量 */
  background: var(--print-bg);
  /* 确保背景适配页面尺寸 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 强制浏览器打印背景（兼容webkit内核浏览器） */
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

额外注意事项 #

• 浏览器默认可能不打印背景图片，你可以提醒用户在打印设置中开启「打印背景图形」（比如Chrome在打印预览的「更多设置」里）；上面的color-adjust属性也能帮助强制浏览器显示背景。
• 测试打印效果一定要用浏览器的打印预览功能，普通的页面渲染不会展示@page的样式。

内容的提问来源于stack exchange，提问作者Lenny