Question

这个问题was asked before，但解决方案不适用于我的情况。我想确保打印某些背景图像，因为它们是页面的组成部分。（它们不是直接在页面中的图像，因为它们中有几个被用作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

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

一个缺点是，要在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

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

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

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

Answer 10

当您将！important属性添加到背景图片时，它正在使用Google Chrome 确保先添加属性然后重试，你可以这样做

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

}

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"/>

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

13 个答案: