强制浏览器在chrome，firefox上打印背景图像

Question

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

我有一个具有内联样式属性的div元素（因为div的背景图像将在编码中使用for循环动态选择），如下所示

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

所以我在这里阅读一些内容，我们可以编写print media css，使背景图像和颜色默认可见

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

但我不知道怎么用内联css（ style='background-image: url('/static/images/print_%s.png') ）来编写这个媒体css，我在上面的div中

那么如何使用内联css编写媒体css，以便在某些单击ctrl+p时默认情况下在打印预览中显示背景图像？

Answer 1

这个答案对你有帮助。 它适用于FF和Chrome。 首先你设置!important对你的内联css !important ，就像这样<div class='assessment' style='background-image: url('/static/images/print_%s.png')!important > 。 然后在你的css文件中：

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

Answer 2

如何使用@media print方法？

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

在给出打印选项的同时，您可以选择许多选项来打印背景图像。