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;
  }
}

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

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

Answer 1

这DEMO HERE会对您有所帮助。它适用于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);
  }
}

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

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

2 个答案: