如何防止 Internet Explorer 使用打印 CSS 样式表在打印输出的每一页中重复显示相同的背景图像？答案

【问题标题】：How can I prevent Internet Explorer from repeat displaying the same background image in every page of a print out using a print CSS stylesheet?如何防止 Internet Explorer 使用打印 CSS 样式表在打印输出的每一页中重复显示相同的背景图像？
【发布时间】：2013-07-10 09:14:54
【问题描述】：

这里是对问题的描述：对于初学者，我在页面顶部的网页版本（screen 媒体）上显示了一个背景徽标图像，跨越了页面的整个宽度（基本上是一个标头）。

然后我添加了一个打印样式表并一直隐藏和显示某些部分以优化用户及其打印机的体验。

但是，问题出在这里，我注意到在 IE 上，在打印预览的每一页中，当页面内容足以容纳多个页面时，徽标图像被添加到打印输出的每一页的顶部总页数。因此，如果 3 页有足够的内容，那么在所有这三页中，徽标图像都会出现在打印输出的每一页的顶部，而它应该只出现在第一页中。

我检查了我的 CSS，但找不到发生了什么。我没有包含定义背景图像的 CSS 类重复多次的部分。这只发生在 IE 上。不在 Chrome 和 Firefox 上。

这是 HTML 的摘录：

    ....
    <body>
        <div class="repeating-bg-img">
            <div class="container">
            ...
            <!-- /.inner content that is long enough for more than one page -->

            ...
            </div><!-- /.container -->
        </div><!-- /.repeating-bg-img -->
    </body>
</html>

这里是 print.css 样式表中的 CSS 的摘录，其中 media = print：

.repeating-bg-img {
    background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}

以前有人在 IE 上遇到过这种情况吗？如果是这样，你有解决办法吗？

【问题讨论】：

标签： css image internet-explorer printing styles

【解决方案1】：

我今天遇到了同样的问题。一种解决方案是这样的结构：

<body>
  <div id="background" style="position: relative;">
  <img src="bkgnd.png" style="position: absolute; z-index: -1;">
    <div class="container" ...>
    ...
    </div>
  </div>
</body>

基本思想是将图像从流中取出，但相对于其包含的

进行定位。 z-index 将其推到其他元素后面。所以这可以用作任何类型的列标题。

这样做的一个好处是，即使在打印对话框中未设置“背景图像”选项，也会打印背景图像。不过，我也希望看到一个合适的解决方案。

编辑 2013/07/23：

看起来 CSS3 属性将是 box-decoration-break。这对旧版本的 IE 没有帮助，但规范可在此处获得：http://www.w3.org/TR/css3-background/#box-decoration-break

如果您真正想要的是标头，我也认为这可能有效：

@media print {
  div#background { background: none; }
  @page  :first  { background: url('bkgnd.png') center no-repeat;
                 margin: ...; }
}

但它看起来也是 CSS3。 Chrome 从服务器加载图像，但只支持 'margin' 属性； Firefox 和 IE9 似乎都忽略了这一切。

【讨论】：