css - 在 WebKit 中打印时每个页面上的元素

Question

例如，我正在尝试使用 <div>或 <img>在 WebKit 中打印时出现在所有页面上。

这在 IE/FF 中有效:

@media print {
  .logo {
    position: fixed;
    right: 0;
    top: 0;
  }
}

<div style="page-break-after:always"></div>
<div style="page-break-after:always"></div>
<img class="logo" src="http://placehold.it/100x100/" alt="" />

这似乎是 WebKit 中的一个突出错误，是否有任何解决方法？谢谢。

Answer 1

这就是它应该如何处理水印......

div.watermark{
    display:none;
}

然后是@media print

div.watermark{
    display:block;
    position:fixed;
    z-index:-1;
    width:100%;
    height:100%;
}
    div.content > *:first-child,x:-moz-any-link{margin-top:0;}/* ff only */
    div.watermark,x:-moz-any-link{z-index:auto;}/* ff only */
    div.watermark,x:-moz-any-link,x:default{z-index:-1;}/* ff3 only */

    @media all and (min-width: 0px){div.watermark{width:8.5in;}} /* opera only */

    div.watermark div{
        position:absolute;
        left:0;
        width:99%;
    }

我认为这篇文章解释了您想有效地做什么http://www.andypemberton.com/css/print-watermarks-with-css/ ( archived link )

不幸的是，这仍然是 webkit 的问题。

解决方案:每次说出标准页面大小(以像素为单位)后，您必须使用 javascript 克隆图像类，并在屏幕上隐藏它并添加...

page-break-before: always;
page-break-inside: avoid;
display:block

查看此答案了解详情 https://stackoverflow.com/a/19170212/1278540

看看这个演示 http://fiddle.jshell.net/jaap/7ZGVv/2/show/

IMO 还不错。