如何在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*/
  }
}