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

Question

我需要打印一个报告页面，其中有几张背景图片。但这些图片无法打印。实际上，这些图片是图表的标志，因此在报告中非常重要。

我有另一种选择，即将它们裁剪并包含在页面中作为< img>标签，但这是最后的选择。因此，在这之前，我想知道是否有任何方法可以强制打印这些图片？有人能帮帮我吗？

- Shrikant

---

请参考此链接（https://dev59.com/5XRB5IYBdhLWcg3wiHll），你将完全了解如何打印背景图片的方法。 - Yoko Zunna

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隐藏，并在打印时正常显示。这是一种hack，但它会实现您想要的功能。它将打印该图像。

话虽如此，您正在做的事情非常不好的习惯。任何传达有意义信息给用户的内容都不应只使用CSS来传达。这不仅是语义上不正确的，而且使图表对用户不太有用。内联图像效果更好，如果可以，您应该使用它。

- daveyfaherty

Answer 2

如果您在背景图像上添加!important属性，它将在Google Chrome中工作。请确保首先添加属性，然后再尝试。您可以像这样执行：

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

您还可以使用这些有用的打印样式，将其放在CSS文件末尾。

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

- Hady El-Hady