在 Chrome 中打印网页的自定义 Css 版本

【问题标题】：Print a customised Css version of a webpage in Chrome在 Chrome 中打印网页的自定义 Css 版本
【发布时间】：2018-11-07 09:30:22
【问题描述】：

使用 Google Chrome 的 Inspector，我可以轻松地检查网页（任何公共网页，而不是我控制的网页）将如何呈现以进行打印，doing this。

另外，I can change 一些 Css 样式的外观在运行中。

我的问题是：我现在真的可以打印我正在浏览的网页的修改版本吗？默认情况下不是，我已经检查过了，但也许我可以做点什么......

（编辑：我对改变背景颜色特别感兴趣）

【问题讨论】：

【解决方案1】：

我只是在更改背景颜色，所以我自动认为打印版本忽略了我的“即时”更改。事实上，Chrome 和 Safari 中的打印版本总是忽略背景颜色，无论它们是原始版本还是修改版本。

最终的解决方案是动态编辑 HTML，并将-webkit-print-color-adjust: exact !important; 添加到要打印的元素中，并使用背景颜色。

就我而言，我将其添加到 <head> 元素中：

<style>
.elements-i-want-to-change {
  background-color: [the colour];
  -webkit-print-color-adjust: exact;
}
</style>

现在，印刷版将在背景中包含我修改过的颜色：-D

【讨论】：