list-style-image, 但只适用于每个图标都有不同的图像，无法使用CSS sprites。在Chrome和Safari中，您可以向元素添加CSS样式-webkit-print-color-adjust: exact;，以强制打印背景颜色和/或图像。
默认情况下，浏览器会关闭打印页面的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+ */
}
!important关键字？ - user9315861color-adjust。它似乎只适用于背景，而不是color CSS属性。这被报告为一个bug，但没有太多的活动或投票。如果字体颜色不能保留，使其无法阅读，那么保留背景就毫无意义了。 - Frédéric!important 对我来说不是必要的。 - Kip我找到了一种使用CSS打印背景图像的方法。 这有点取决于您的背景布局方式，但对于我的应用程序似乎有效。
基本上，您需要在样式表的末尾添加@media print，然后略微更改body的背景。
例如，如果您当前的CSS如下所示：
body {
background:url(images/mybg.png) no-repeat;
}
在你的样式表末尾，添加以下内容：
@media print {
body {
content:url(images/mybg.png);
}
}
这将把图片作为“前景”图像添加到页面主体中，从而使其可以打印。
您可能需要添加一些额外的CSS以使z-index合适。但是，这取决于您的页面布局方式。
当我无法在打印视图中显示标题图像时，这对我很有用。
<img>，以满足@media print的需要。网络图像在深色背景上，所以在白纸上打印该图像会不清晰，而我又不想强制用户在标题上打印暗色背景。完美！ - JHogue您对浏览器的打印方法几乎没有控制权。最多只能建议，但如果浏览器的打印设置为“不要打印背景图像”，除非重写页面将背景图像转换为浮动的“前景”图像，否则您将无能为力。
<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中起作用，您需要在打印媒体查询之外指定此行为，然后在打印媒体查询块中将其可见。因此，类似于这样的代码...
.image:before{
visibility:hidden;
position:absolute;
content: url("your/image/path");
}
@media print {
.image{
position:relative;
}
.image:before{
visibility:visible;
top:etc...
}
}
缺点是在普通页面加载时，图像通常会被下载，增加不必要的负担。您可以通过只使用与原始可见图像相同的图像/路径来避免这种情况。
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
注意：它不会在整个文档中起作用，但您可以将其指定为内部元素或容器 div 元素。
.inputbg {
background: url('inputbg.png') !important;
}