如何强制浏览器在CSS中打印背景图像？

Question

之前曾问过这个问题，但该解决方案不适用于我的情况。我想确保打印某些背景图像，因为它们是页面不可或缺的。（它们不是直接在页面中的图像，因为其中有几个用作CSS精灵。）关于同一问题的另一种解决方案建议使用list-style-image，只有在每个图标都有不同的图像且没有CSS精灵时，它才有效。除了创建带有内联图标的单独页面之外，还有其他解决方案吗？

Answer 1

您对浏览器的打印方法几乎没有控制。您最多可以提出建议，但是如果浏览器的打印设置具有“不打印背景图像”，则无需重写页面就无法将背景图像转换为恰好位于其他内容后面的浮动“前景”图像。

Answer 2

使用Chrome和Safari，您可以将CSS样式添加-webkit-print-color-adjust: exact;到元素中，以强制打印背景颜色和/或图像

Answer 3

我找到了一种使用CSS打印背景图像的方法。这在某种程度上取决于您的背景布局，但它似乎适用于我的应用程序。

本质上，您可以在@media print样式表的末尾添加，然后稍微更改正文背景。

例如，如果您当前的CSS如下所示：

body {

background:url(images/mybg.png) no-repeat;

}

在样式表的最后，添加：

@media print {

body {

   content:url(images/mybg.png);

  }

}

这会将图像作为“前景”图像添加到身体，从而使其可打印。您可能需要添加一些其他CSS才能使其z-index正确。但同样，这取决于页面的布局方式。

当我无法在打印视图中显示标题图像时，这对我有用。