强制浏览器在 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>

所以我读了一些 here 的东西，我们可以写 print media css 以使背景图像和颜色默认可见

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

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

那么如何使用内联css编写媒体css，以使背景图像在某些点击时默认在打印预览中可见ctrl+p？

Answer 1

这个answer 会帮助你。它适用于 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;
}

Answer 2

用@media print方法怎么样？

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

在提供打印选项的同时，您可以在一些设置中选择多个选项来打印或不打印背景图像..