0

Chris Antonellis 的 Freezeframe 插件允许您使用以下命令在鼠标悬停时为 gif 设置动画：

< img src="image.gif" freezeframe />

在此处查看他网站上的示例，并在此处查看文档。

不幸的是，当使用此插件时，网站的打印版本无法显示图像（当网站上嵌入动画 gif 时，通常会在打印页面上弹出静态版本）。有没有办法可以修复它以使其正确打印？

4

1 回答 1

0

您可以使用媒体类型为网站的打印版本设置特定样式。

@media print {
    /* CSS styles here will only affect the website when it is printed. */
}

当您打印动画 gif 时，它只会显示动画的第一帧。如果您想创建动画 gif 的单独“快照”图像，以便更好地控制将在打印版本上看到的内容，您可以在页面上嵌入另一个图像。

对于您的特定需求，最好将每个图像包装在一个div基于媒体类型应用的特定 CSS 中。以下代码将允许您在您的网站上为常规访问者显示动画 gif，并允许您为打印版本指定单独的图像显示。

<style>
.print-image {
  display:none;
}

@media print {
    .screen-image {
        display:none;
     }
      .print-image {
        display:block;
      }
}
</style>

<!-- Content within the .screen-image element will be displayed to normal visitors -->
<div class="screen-image">
    <img src="http://placehold.it/450x250" />
    <p>Image for normal viewing.</p>
</div>

<!-- Content within the .print-image element will be displayed when website is printed -->
<div class="print-image">
    <img src="http://placehold.it/450x250" />
    <p>Image for print view.</p>
</div>

这是一个JSFiddle！http://jsfiddle.net/gU57Y/ - 通过按 CTRL+P 并测试打印视图来测试它。

如果您想了解有关基于媒体类型应用样式的更多信息 - 您可以在W3.org的媒体类型页面上了解更多信息。

于 2013-04-13T01:25:48.227 回答