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

Question

这个问题was asked before 但该解决方案不适用于我的情况。我想确保打印某些背景图像，因为它们是页面不可或缺的。 （它们不是直接在页面中的图像，因为其中有几个被用作 CSS 精灵。）

关于同一问题的另一种解决方案建议使用list-style-image，这仅在您为每个图标都有不同的图像且不能使用 CSS 精灵时才有效。

除了用内联图标创建一个单独的页面之外，还有其他解决方案吗？

Answer 1

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

Answer 2

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

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

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 正确。但同样，这取决于您的页面布局。

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

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 所说，body content: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...
    }       
}

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

Answer 9

当您将 !important 属性添加到背景图像时，它在谷歌浏览器中工作 确保你先添加属性，然后再试一次，你可以这样做

    .inputbg {
background: url('inputbg.png') !important;  

}

Answer 10

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

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

注意：它不适用于整个主体，但您可以为内部元素或容器 div 元素指定它。

Answer 11

您可以为固定颜色使用边框。

 borderTop: solid 15px black;

对于渐变背景，您可以使用：

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

Answer 12

https://gist.github.com/danomanion/6175687 提出了一个优雅的解决方案，使用自定义项目符号代替背景图像：

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

通过将其包含在

中

@media print {
}

块，我可以将屏幕上显示为背景图像的白色透明徽标替换为用于打印的黑色透明徽标。

Answer 13

你可以做一些这样的技巧：

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

在正文标签中：

<img src="YOUR IMAGE URL" class="whater"/>