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

Question

之前曾问过这个问题,但解决方案并不适用于我的情况.我想确保打印某些背景图像,因为它们是页面的组成部分.(它们不是直接在页面中的图像,因为它们中有几个被用作CSS精灵.)

关于同一个问题的另一个解决方案建议使用list-style-image,只有当每个图标都有不同的图像时才能使用,不能使用CSS精灵.

除了创建一个内联图标的单独页面,还有另一种解决方案吗？

Answer 1

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

Answer 2

我找到了一种用CSS打印背景图像的方法.它有点依赖于你的背景布局,但它似乎适用于我的应用程序.

基本上,您将@media print样式表添加到样式表的末尾并稍微更改正文背景.

例如,如果您当前的CSS看起来像这样:

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

在样式表的末尾,添加:

@media print {
body {
   content:url(images/mybg.png);
  }
}

这将图像作为"前景"图像添加到主体,从而使其可打印.您可能需要添加一些额外的CSS才能z-index正确使用.但同样,它取决于您的页面布局.

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

Answer 3

默认情况下,浏览器可以选择打印背景颜色和图像.您可以在CSS中添加一些行来绕过它.只需添加:

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

Answer 4

您几乎无法控制浏览器的打印方法.最多可以提出建议,但如果浏览器的打印设置"不打印背景图像",那么如果不重写页面将背景图像转换为恰好位于其他内容后面的浮动"前景"图像,则无法做到.

Answer 5

以下代码适用于我(至少对于Chrome).

我还添加了一些边距和页面方向控件.(肖像,风景)

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

Answer 6

确保使用!important属性.这大大增加了打印时保留样式的可能性.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

Answer 7

就像@ ckpepper02所说,机身内容:url选项效果很好.然而,我发现如果你稍微修改它,你可以使用它来添加一个使用:before伪元素的标题图像,如下所示.

@media print {
  body:before { content: url(img/printlogo.png);}
}

这将使图像滑到页面顶部,从我的有限测试中,它可以在Chrome和IE9中运行

-hanz

Answer 8

使用伪元素。虽然许多浏览器会忽略背景图像，但其内容设置为图像的伪元素在技术上不是背景图像。然后，您可以将背景图像大致定位在图像应该放置的位置（尽管它不像原始图像那么简单或精确）。

一个缺点是，要在 Chrome 中使用此功能，您需要在打印媒体查询之外指定此行为，然后使其在打印媒体查询块中可见。所以，像这样的事情...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

缺点是图像通常会在正常页面加载时下载，从而增加不必要的体积。您可以通过仅使用与原始可见图像相同的图像/路径来避免这种情况。