html - 如何在 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 传达。它不仅在语义上不正确，而且还降低了图形对用户的用处。内联图像要好得多，如果可以的话，这就是您应该使用的。