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

Posted 2023-03-06

【中文标题】强制浏览器在 chrome、firefox 上打印背景图像

【英文标题】：Force browsers to print background images on chrome, firefox

【发布时间】：2014-04-18 02:04:19

【问题描述】：

我有一个包含一些背景图像和 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？

【参考方案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;

【参考方案2】：

用@media print方法怎么样？

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

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

【讨论】：

正如我上面所描述的，我将在 for 循环中选择不同的背景图像，所以我使用了内联属性作为背景图像，如果我像上面那样编写媒体 css，那么我将不得不显示固定的背景图像div对吗？我将使用动态背景图像在 for 循环中生成上述 div

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

截至 2018 年 5 月 10 日，此方法适用于所有当前版本的 IE、Edge、FF、Chrome、Opera 和 Safari。谢谢！