我如何强制浏览器在CSS中打印背景图片？
这个问题以前曾经问过，但是解决办法不适用于我的情况。 我想确保某些背景图像被打印，因为它们是页面不可分割的一部分。 （他们不是直接在页面中的图像，因为有几个被用作CSS精灵。）
在同一个问题上的另一个解决schemebuild议使用list-style-image ，只有在每个图标都有不同的图像时才可以使用，不需要CSS sprites。
除了用内联的图标创build一个单独的页面，还有其他解决scheme吗？
您对浏览器的打印方法几乎没有控制权。 最多可以selectSUGGEST，但是如果浏览器的打印设置有“不打印背景图像”，那么在没有重写页面的情况下，就无法将背景图像变成浮动的“前景”图像。
使用Chrome和Safari，您可以添加CSS样式-webkit-print-color-adjust: exact; 元素强制打印背景颜色和/或图像
我find了一种用CSS打印背景图片的方法。 这有点依赖于你的背景布局，但似乎适用于我的应用程序。
本质上，您将@media print添加到样式表的末尾，并略微更改主体背景。
例如，如果你现在的CSS如下所示：
body { background:url(images/mybg.png) no-repeat; }
在样式表的最后，添加：
@media print { body { content:url(images/mybg.png); } }
这将图像添加到身体作为“前景”图像，从而使其可打印。 您可能需要添加一些额外的CSS来使z-index正确。 但是，这又取决于你的页面布局。
这对我来说，当我不能得到一个标题图像显示在打印视图。
浏览器默认情况下可以select打印背景颜色和图像。 你可以在CSS中添加一些行来绕过这个。 只需添加：
* { -webkit-print-color-adjust: exact !important; /* Chrome, Safari */ color-adjust: exact !important; /*Firefox*/ }
确保使用！important属性。 这大大增加了打印时保留样式的可能性。
#example1 { background:url(image.png) no-repeat !important; } #example2 { background-color: #123456 !important; }
下面的代码适用于我（至less对于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>
就像@ ckpepper02所说的，正文内容：url选项效果不错。 然而，我发现如果你稍微修改它，你可以使用它来添加一个头像使用：before伪元素如下。
@media print { body:before { content: url(img/printlogo.png);} }
这将在页面顶部的图像，从我有限的testing，它在Chrome和IE9的作品
-hanz
使用psuedo-elements。 虽然许多浏览器会忽略背景图像，但是将其内容设置为图像的伪元素在技术上不是背景图像。 然后，您可以将背景图像大致定位在图像应该去的地方（尽pipe它不像原始图像那么容易或精确）。
一个缺点是，要在Chrome中使用，您需要在打印介质查询之外指定此行为，然后使其在打印介质查询块中可见。 所以，这样的事情…
.image:before{ visibility:hidden; position:absolute; content: url("your/image/path"); } @media print { .image{ position:relative; } .image:before{ visibility:visible; top:etc... } }
缺点是图像通常会在正常的页面加载下载，增加了不必要的批量。 您可以通过仅使用您已经用于原始可见图像的相同图像/path来避免这种情况。
它是在谷歌浏览器，当你添加！重要的属性到背景图像确保你先添加属性，然后再试一次，你可以这样做
.inputbg { background: url('inputbg.png') !important;
}
