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

这个问题 之前被问过，但解决方案不适用于我的情况。我想确保某些背景图像被打印，因为他们是整体的页面。(它们不是直接在页面中的图像，因为有几个图像被用作 CSS 精灵。)

针对同一问题的另一个解决方案建议使用 list-style-image，只有当每个图标都有不同的图像时，才能使用它，不能使用 CSS 精灵。

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

201843 次浏览
小开
最佳答案

您对浏览器的打印方法几乎没有控制权。最多你可以建议，但是如果浏览器的打印设置有“不打印背景图片”，你无法不重写你的页面，把背景图片变成漂浮的“前景”图片，恰好在其他内容的后面。

小开

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

实际上，您可以将 @media print添加到样式表的末尾，并稍微更改主体背景。

例如，如果你当前的 CSS 看起来像这样:

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

在样式表的末尾，添加:

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

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

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

小开

使用 suedo-element。虽然许多浏览器会忽略背景图像，但是将内容设置为图像的 suedo 元素从技术上来说不是背景图像。然后你可以将背景图像大致定位在图像应该去的地方(尽管它不像原始图像那么容易或精确)。

一个缺点是，要在 Chrome 中实现这一点，您需要在打印媒体查询之外指定这一行为，然后将其显示在打印媒体查询块中。所以，像这样的事..。

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


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

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

小开

正如@ckpepper02所说，body content: url 选项工作得很好。然而，我发现如果稍微修改一下它，就可以使用: before 伪元素添加一个头部图像。

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

这将滑动在页面顶部的图像，从我有限的测试，它工程在 Chrome 和 IE9

汉兹

小开

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

小开

一定要使用! important 属性。这会大大增加打印时保留样式的可能性。

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


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

下面的代码对我来说很好用(至少对 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>
小开

默认情况下，浏览器有打印 background-color和关闭图像的选项。您可以在 CSS 中添加一些行来绕过这一步。 只要加上:

* {
-webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important;                 /* Firefox 48 – 96 */
print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
}
小开

它是工作在谷歌铬当你添加! 重要属性的背景图像 确保您先添加属性，然后再试一次，您可以像这样做

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

}

小开

你可以做一些这样的把戏:

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

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

 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 提出了一个优雅的解决方案，使用自定义项目符号代替背景图像。在本例中，目的是将背景图像应用到具有 logo类的 a元素。(您应该用这些代替您希望样式化的元素的标识符。)

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

将此内容包含在

@media print {
}

块，我能够替换一个白对透明的标志在屏幕上，渲染为背景图像，与黑对透明的标志打印。

小开

默认情况下，浏览器有打印背景颜色和图像的选项。您可以在 CSS 中添加一些行来绕过这一步。只要加上:

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

注意: 它不能在整个主体上工作，但是您可以为内部元素或容器 div 元素指定它。


提交答案