Question

我有一个网页，可以加载来自css sprite的两个图像：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <div class="arrow low"></div>
    <div class="arrow high"></div>
</body>
</html>

和css（stylesheet.css）看起来像这样：

.arrow
{
  height: 239px;
  width: 260px;
  background: url('logotypearrows.png') no-repeat;
}

.arrow.high
{
  background-position: 10px 0px;
}

.arrow.low
{
  background-position: -1003px 0px;
}

网页看起来很完美，但我无法打印。我看不到动态加载的箭头。谁知道如何解决这个问题？我希望能够打印出箭头，我想从css精灵中加载它们。

Answer 1

默认情况下，浏览器不打印背景图像，用户可以更改。也许您应该在div <div class="arrow low"><span class="print-only">*</span></div>中添加一些内容，并使其仅对包含@media print的网页的打印版本可见。

Answer 2

快速修复：

您可以使用自定义css类进行媒体类型打印，

@media print {
     .printable {
         -webkit-print-color-adjust: exact !important;
         color-adjust: exact !important; 
     }
}

并将此类添加到div中，

<div class="arrow high printable"></div>

这将在Chrome，Firefox和Safari中打印背景图片。

注意：这些css选项是非标准的 - 因此，在生产中使用这些选项非常危险。此外，这不能在Internet Explorer中工作 - 您需要启用选项＆＃34;打印背景图像＆＃34;来自文件 - ＆gt;页面设置。

跨浏览器修复：

您可以使用具有在类中应用的相同逻辑的实际图像，而不是使用带有css图像精灵的div作为背景。例如，您可以查看我的JsFiddle here

Answer 3

您必须在哪张图片上打印？

Answer 4

由打印或不打印的用户及其浏览器设置决定背景图片。为了避免依赖它，请放置 HTML中的前景中的图像。 - Kon

（取自此related thread）

打印从css精灵加载的图像？

4 个答案: