无法打印背景颜色（css 解决方案）？

Question

我正在尝试学习如何在 chrome 中启用打印背景颜色页面：

以http://angularjs.org/为例

主页是：

所以如果我点击print (ctrl+P) 并标记“背景颜色和图像” - 它确实显示了将来要打印的背景颜色：

一切正常。

但是，如果我导航到另一个页面 http://docs.angularjs.org/tutorial/step_02，其中也有背景颜色：

当我尝试打印它时 - 我在预览窗格中看到它没有颜色：

我的问题是：他们是怎么做到的？ （或者更好，我怎样才能让它打印背景颜色？）

我已经阅读了here 我应该使用-webkit-print-color-adjust:exact;

所以我通过 chrome developer toolbar 将它添加到 html 中，但它没有帮助。 （当我再次单击 ctrl+p 时

我应该在 css 中进行哪些更改才能使其也打印背景颜色？

相关信息，搜索@media，在：

但我没有找到任何相关信息。

Answer 1

好吧，无论如何，我想你没有明白我在 cmets 中的意思，所以这很简单，比如说我有一个元素，比如

<div class="blow"></div>

将background 设置为tomato，所以为了使它工作，首先你必须确保你有media 打印设置，比如

@media print {
  /* Declarations go here */
}

或

<link rel="stylesheet" href="style.css" media="print" />

---

现在，你要声明的是

-webkit-print-color-adjust: exact; 在属性块中，比如

@media print, screen { /* Using for the screen as well */
    .blow {
        height: 100px; 
        width: 100px; 
        background: tomato;
        -webkit-print-color-adjust: exact; 
    }
}

Demo （仅适用于webkit 浏览器，即 Chrome/Safari）

在上面的演示中，您应该能够看到红色块，即使在 Chrome 的打印预览窗口中也是如此。

---

正如你所说，它对我有用..

或

---

支持同脏，更多属性可以参考MDN

来自 MDN：

不打印正文元素背景

目前也不打印 Chrome 和 Safari 打印 body 元素的背景。如果这 属性设置为精确的 body 元素，它只适用于 它的后代。

Chrome 裁剪图像错误

当背景图像被剪裁时（例如，当使用 背景图像精灵），由于Chromium bug 131054，它们将 从 Chrome 浏览器打印时显示失真 -webkit-print-color-adjust：精确。纯色背景和未剪裁的背景图像（即宽度和高度低于 元素）打印正确。

外部链接

WebKit 错误64583：“WIP：添加 CSS 属性以控制单个元素背景的打印”
CSSWG wiki: "print-background" - 一个标准化的提案 属性

Answer 2

您的背景颜色可能已被覆盖。要实现打印的背景颜色，请增加选择器的特异性或将!important 添加到语句中。与-webkit-print-color-adjust: exact; 一起，这应该适合您：

@media print {
    .mycontainer {
        background-color: #000 !important;
        -webkit-print-color-adjust: exact;
    }
}