使用打印 css，之前添加的图像：Internet Explorer 8 中未显示主体

Question

我在我们的网站上使用了单独的打印 css。我们被要求在印刷页面的顶部有我们的标志。这是我用于 print.css 的代码：

body:before {
content: url(../images/logo.gif);
}

这适用于 Firefox、Chrome、Safari 和 Opera ...当然你知道接下来会发生什么。

它在 Internet Explorer 8 中不起作用，它显然支持以前作为伪类：http://www.quirksmode.org/css/beforeafter_content.html

在打印预览中，有一个与徽标大小相同的空白区域，但我们的徽标无法打印。如果我将代码更改为：

content: "Test Text" url(../images/logo.gif);

“测试文本”显示，但仍未显示徽标。

有人有什么想法吗？我无法调试“打印预览”，而仅仅更改 CSS 链接上的媒体类型会在浏览器屏幕上呈现完全不同的内容，这让我非常困难。

干杯 玉

Answer 1

默认情况下您不能打印背景图像。用户需要更改浏览器设置才能打印背景颜色和图像。

最好的办法是添加一些这样的 HTML：

<div class="PrintOnly">
  <img id="PrintLogo" src="logo.gif"/>
</div>

设置类似这样的样式以显式隐藏非打印媒体配置：

  .PrintOnly {         display:none; } 
   @media print {  
      .PrintOnly {     display:block; }
   }