html - 如何在 HTML 中强制打印背景图像？

Question

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

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

score 23 · Accepted Answer

默认情况下，浏览器在打印页面时会忽略背景 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 来传达。它不仅在语义上不正确，而且使图形对用户的用处降低。内联图像要好得多，如果可以的话，那就是你应该使用的。

score 13 · Accepted Answer

当您将 !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*/
  }
}

2 回答 2