打印从css sprite加载的图像？答案

【问题标题】：Print image loaded from css sprite?打印从css sprite加载的图像？
【发布时间】：2012-01-17 12:38:23
【问题描述】：

我有一个网页，它从一个 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 精灵中加载它们。

【问题讨论】：

标签： html css image printing

【解决方案1】：

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

【讨论】：

【解决方案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 中不起作用 - 您需要从文件 --> 页面设置中启用“打印背景图像”选项。

跨浏览器修复：

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

【讨论】：

【解决方案3】：

您必须在哪个图像中打印？

【讨论】：

【解决方案4】：

打印或不打印取决于用户及其浏览器设置背景图像。为了不让自己依赖它，把 HTML 中前景中的图像。 ——Kon

（取自related thread）

【讨论】：