使用 chrome 中的背景色打印 css 媒体类型答案

【问题标题】：css media type print using background-color in chrome使用 chrome 中的背景色打印 css 媒体类型
【发布时间】：2012-02-04 19:47:45
【问题描述】：

我在 CSS 媒体类型打印中使用background-color 属性。

问题是谷歌浏览器在打印预览中没有显示background-color 或background-image。

如何解决？

【问题讨论】：

【解决方案1】：

我尝试了几个小时使用建议的想法，但没有奏效。我需要使用!important

不知何故，chrome 必须遵循不同的背景颜色声明。

background-color:red !important

【讨论】：

【解决方案2】：

Chrome 支持通过 CSS 控制背景颜色/图像打印。您可以在应打印背景的元素上设置以下 CSS 属性：

-webkit-print-color-adjust: exact;

当然，这通常由浏览器设置决定 - 但 Chrome 允许网页设计师根据每个元素确定背景的打印方式...

注意事项：

感谢 Cron 的 Web 技术博客，这是我第一次发现它的地方：-

此外，这会导致一些关于该功能的背景信息（不是双关语！）：-

希望这会有所帮助...

【讨论】：

不错的发现。另请注意，它和 CSS 渐变目前存在错误。
这似乎不再起作用了……至少从 Chrome 22.0.1229.79 开始。
刚刚测试过（使用 Chrome 25.0.1364.97），它对我来说仍然可以正常工作。不过要注意的一件事是 CSS 是否仅应用于“屏幕”媒体...（更多信息：w3.org/TR/CSS2/media.html）

【解决方案3】：

我认为问题不在于您的代码，而在于 Chrome：没有打印背景（图像或颜色）的选项：请参阅 http://www.google.com/support/forum/p/Chrome/thread?tid=17a4ac343580c8d3&hl=en

使用 Firefox，默认情况下不打印背景图像，但可以在“打印... -> 页面设置”中激活它

【讨论】：

【解决方案4】：

您可以尝试使用 chrome 中的开发人员工具来检查您的 DOM 元素中应用了哪些 css 规则。这将帮助您调试和解决问题。

【讨论】：