如何在HTML中强制打印背景图像？

Question

我需要打印包含几个背景图像的报告页面.但只有这些图像不可打印.这些图像实际上是图形的徽标,因此在报告中非常重要.

我有另一个选项,我可以裁剪它们并在页面中包含标签,但这是最后一个选项.因此,在此之前,我想知道是否有任何方法可以强行打印这些图像？有人可以帮帮我吗？

Answer 1

默认情况下,浏览器在打印页面时会忽略后台css规则,而您无法使用css来克服此问题.

用户需要更改其浏览器设置.

因此,您需要打印的任何图像都应该呈现为内嵌图像而不是CSS背景.您可以使用css仅显示内嵌图像以进行打印.像这样的东西.

HTML

<div class"graph-image graph-7">
  <img src="graph-7.jpg" alt="Graph Description" />
</div>

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}

@media print{
  .graph-image img{display:inline;}
}

使用此代码或类似代码,意味着图像在html中使用一次,在css中使用一次.html版本使用css隐藏,对于打印,它显示为正常.这是一个黑客,但它会做你想要它做的.它会打印图像.

话虽如此,你所做的是非常糟糕的做法.不应该仅使用css来传达向用户传达有意义信息的任何内容.它不仅在语义上不正确,而且使图形对用户不那么有用.内联图像要好得多,如果可以,那就是你应该使用的.

Answer 2

当你添加!重要属性到背景图像时,它正在使用谷歌浏览器确保你先添加属性然后重试,你可以像

.class-name {
    background: url('your-image.png') !important;
}

您也可以使用这些有用的打印卷并将其放在css文件的末尾

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}