如何用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隐藏，并且在打印时正常显示。这是一个hack，但是它会做您想做的事。它将打印图像。

话虽如此，您正在做的事情是非常糟糕的做法。不能仅使用css传达向用户传达有意义的信息的任何内容。它不仅在语义上不正确，而且使图形对用户的用处不大。内联图像要好得多，如果可以的话，那就应该使用它。