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

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

关于该问题的另一种解决方案建议使用list-style-image，只有在每个图标都有不同的图像且没有CSS精灵的情况下，它才有效。

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

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

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

浏览器默认情况下具有打印背景色和图像的选项。您可以在CSS中添加一些行来绕过此操作。只需添加：

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

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

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

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

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

在样式表的最后，添加：

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

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

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

以下代码对我来说效果很好（至少对于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>

确保使用！important属性。这极大地增加了打印样式时保留样式的可能性。

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

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

就像@ ckpepper02所说的那样，body content：url选项效果很好。但是我发现，如果稍加修改，就可以使用它来使用：before伪元素来添加各种标题图像，如下所示。

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

这会将图片拖到页面顶部，经过我的有限测试，它可以在Chrome和IE9中使用

-汉兹

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

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

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

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

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

当您在背景图片中添加！important属性时，它在谷歌浏览器中有效。请确保先添加属性，然后重试，您可以这样做

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

}

您可以将边框用于固定颜色。

 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;

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 {
}

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

您可以做一些技巧：

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