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

Posted 2023-02-14

【中文标题】如何强制浏览器在 CSS 中打印背景图像？

【英文标题】：How can I force browsers to print background images in CSS?

【发布时间】：2011-10-03 22:49:38

【问题描述】：

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

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

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

【参考方案1】：

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

【讨论】：

这太棒了。使 phantomjs 用户/webkit 的生活更轻松

@MuneemHabib 在IE下不行，实际上只支持Chrome：developer.mozilla.org/en-US/docs/Web/CSS/…

这对 chrome 有用...幸运的是在这种情况下我只需要支持 wekkit ...

@DisgruntledGoat 应该将其更新为正确答案，因为它很快解决了我的问题（我的工作项目只关注 Chrome）。它显然不适用于所有浏览器，但无论如何都应该事先知道。

@Brett84c：我不同意，因为它只是一个浏览器的解决方案。

【参考方案2】：

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

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

【讨论】：

ya 工作正常，但 mozilla 标记为非标准 此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

为什么需要!important？

为我工作！谢谢。

color-adjust 很遗憾没有得到 FireFox 的正确支持。它似乎仅适用于背景，不适用于 color css 属性。它被报告为bug，没有太多的活动或投票。如果不保留字体颜色，则保留背景是毫无用处的，导致它不可读。

这是一个很好的解决方案。请记住，它不适用于 IE11（我知道！）。

【参考方案3】：

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

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

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

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

在样式表的最后，添加：

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

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

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

【讨论】：

对于我需要做的事情来说，这是一个很棒的解决方案，它是将一个内联 <img>（用于 RWD）与另一个 @media print 切换。 Web 图像位于深色背景上，因此无法在白纸上打印该图像，而且我不想强迫用户在页眉上打印深色背景。完美！

@JHogue - 谢谢！很高兴它对您有所帮助。

虽然这不是一个“正确”的答案。它比公认的答案更有帮助。

下面的答案***.com/a/15208258/915865应该被标记，因为它有更好的解释，恕我直言

在 Firefox 中，它只有在你使用里面的内容时才有效：before like@hanz answer

【参考方案4】：

您几乎无法控制浏览器的打印方法。最多你可以建议，但如果浏览器的打印设置有“不打印背景图像”，那么如果不重写页面以将背景图像变成恰好位于其他内容后面的浮动“前景”图像，那么你将无能为力。

【参考方案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>

【参考方案6】：

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

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


#example2 
    background-color: #123456 !important;

【讨论】：

我使用这种方法为我的公司创建了一些简单的“打印机友好型”报告。它适用于 OS X Chrome/Safari 和 Windows 8 Chrome/IE（尚未尝试任何其他平台）。

这似乎对 Mac 上的 Chrome、Firefox 和 Safari 没有影响。

这正是我需要将该属性应用到该特定元素的每次使用并让我适当地打印文档所需的内容。谢谢！

【参考方案7】：

就像@ckpepper02 所说，body content:url 选项效果很好。然而，我发现，如果你稍微修改它，你可以使用它来使用 :before 伪元素添加各种标题图像，如下所示。

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

这会使图像滑到页面顶部，根据我的有限测试，它适用于 Chrome 和 IE9

-hanz

【参考方案8】：

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

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

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

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

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

【参考方案9】：

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

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

【讨论】：

值得一提的是，与 -webkit-print-color-adjust 一起解决了我的问题：exact !important;

【参考方案10】：

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

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

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

【参考方案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;

【参考方案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 

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

【讨论】：

这是一个可爱的修复，但如果背景图像比容器大得多，它就不起作用了。 （它延伸了我的包含 div）

【参考方案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"/>