在 Firefox 和 IE 中打印背景颜色

Posted 2023-02-21

【中文标题】在 Firefox 和 IE 中打印背景颜色

【英文标题】：Printing background-color in Firefox and IE

【发布时间】：2013-06-01 14:18:36

【问题描述】：

我时遇到了一些问题。对于 Google Chrome，我发现了以下 hack，它运行良好，但对于 Firefox 和 IE，我找不到任何东西。

//Hack for Google Chrome
-webkit-print-color-adjust:exact;

如果有人可以帮助我，我很高兴。

【问题讨论】：

没有人吗？请帮我分享这篇文章...

我在这里添加了一个 hack：***.com/questions/764520/…

CSS @media print issues with background-color;的可能重复

【参考方案1】：

对于 Firefox，在“打印”对话框中有一个“高级”或“显示详细信息”按钮，如果单击该按钮，则在“外观”下有两个复选框。一种用于打印背景颜色和打印​​背景图像。

【讨论】：

谢谢你的回答，但我需要一些不依赖于用户的东西，应用程序中的一些东西来自动打印它，比如对谷歌浏览器的破解。

不幸的是，如果没有用户交互，这是不可能的。 html 打印真的很有限。

【参考方案2】：

* 
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;

浏览器：Chrome、Safari、FireFox

更多：https://wiki.csswg.org/ideas/print-backgrounds

【讨论】：

IE - No. Edge (75+) - 是

【参考方案3】：

如果您可以将元素设置为固定的高度/宽度，则可以设置其大小，将 1 像素的彩色图像放入其中（您希望背景为任何颜色）并使其填充空间。然后您就可以绝对将您的内容放在首位。

<div style="position: relative; width: 100px; height: 100px;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

或者你可以用边框代替图片做同样的事情：

<div style="position: relative; width: 100px; height: 100px;">
    <div style="width: 0; height: 0; border: 50px solid black;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

（来自这里的原创想法：https://defuse.ca/force-print-background.htm）

【参考方案4】：

对于火狐

color-adjust:exact;

将与-webkit-print-color-adjust:exact; 一样工作

【参考方案5】：

正如 Spark 所说，这似乎是不可能的，但您有时可以使用宽边框作为解决方法（例如，高度为 0 且边框为 100 像素的 div）。