强制浏览器在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 mediacss来使背景图像和颜色默认可见

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

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

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

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

Answer 2

@media print使用方法怎么样？

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

在提供打印选项时，有一些设置可以让您选择许多选项来打印或不打印背景图像。