在Chrome和Firefox中强制浏览器打印背景图片

Question

我有一个网页，其中包含一些背景图片和CSS颜色，但是当我使用ctrl + p打印页面时，它显示没有CSS和背景颜色的页面打印预览。

我有一个带有内联样式属性的div元素(因为div的背景图将在编码中动态选择)，如下所示:

<div class='assessment' style='background-image: url('/static/images/print_%s.png')' >
    <p></p>
    <p></p>
</div>

我曾在这里读到一些内容，说我们可以编写 打印媒体 的 CSS，以使背景图片和颜色默认可见，就像这样：

@media print {
.assessment {
   visble:visible;
  }
}

但是我不知道如何使用内联CSS(style='background-image: url('/static/images/print_%s.png'))编写此媒体CSS，以使上面的DIV中的背景图像在打印预览中默认可见。

那么如何编写内联CSS的媒体CSS，以便在某人点击ctrl+p时默认情况下显示背景图像？

- Shiva Krishna Bavandla

Answer 1

这个答案会对您有所帮助。它适用于FF和Chrome。首先，您需要将!important设置为您的内联CSS，如下所示：<div class='assessment' style='background-image: url('/static/images/print_%s.png')!important >。然后在你的CSS文件中：

@media print {
  -webkit-print-color-adjust: exact;
}

- Ivaylo Petrov

---

但是第一次刷新或重新打开页面时，背景图片不会出现。它会在背景图片之后才出现。我该如何使其永久显示？ - Büşra Güler

Answer 2

如何使用@media print方法？

@media print {
body {
   content:url(background.jpg);
  }
}

在打印选项中，有一些设置可以选择是否打印背景图像等选项。

- Kheema Pandey

---

如上所述，我将在循环中选择不同的背景图像，因此我已经使用了内联属性来设置背景图像。如果我按上述方式编写媒体CSS，则必须为div显示固定背景图像，对吗？我将在循环中生成上述div，并使用动态背景图像。 - Shiva Krishna Bavandla

不幸的是，内联样式不能包含除声明以外的任何内容。 - Kheema Pandey

这种方法在截至2018年5月10日的所有当前版本的IE、Edge、FF、Chrome、Opera和Safari中都适用于我。谢谢！ - Troy Thibodeaux