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

【问题标题】：How to forcefully print background image in HTML?如何在 HTML 中强制打印背景图像？
【发布时间】：2012-06-29 21:01:02
【问题描述】：

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

我还有另一个选项，我可以裁剪它们并作为标签包含在页面中，但这是最后一个选项。因此在此之前我想知道是否有任何方法可以强制打印这些图像？谁能帮帮我？

【问题讨论】：

【解决方案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 隐藏，打印时正常显示。这是一个 hack，但它会做你想做的事。它将打印图像。

话虽如此，但您所做的是非常糟糕的做法。任何向用户传达有意义信息的东西都不应该单独使用 css 来传达。它不仅在语义上不正确，而且使图形对用户的用处降低。内嵌图像要好得多，如果可以，那就应该使用它。

【讨论】：

【解决方案2】：

当您将 !important 属性添加到背景图像时，它在谷歌浏览器中工作确保您先添加属性并重试，您可以这样做

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

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

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

【讨论】：