带边距的 CSS 打印背景

Question

我正在尝试制作一份便于打印的简历。除了与背景图片有关的问题外，一切正常。

我不想在打印页面上有任何边距，否则背景图像看起来很乱: https://www.dropbox.com/s/h2zttd8u6r6hq0g/Screenshot%202015-01-08%2014.38.14.png?dl=0

但是，如果我不使用任何边距，背景看起来不错，但我无法在第二页(或其他页面)上使用任何边距: https://www.dropbox.com/s/16vgu3nahfgeipr/Screenshot%202015-01-08%2014.38.55.png?dl=0

body {
    margin: 30px 0;
}

这适用于第一页，但不幸的是，这不适用于任何分页符。有没有办法根据打印页面的顶部/底部进行填充/边距？

编辑:抱歉这个可怕的例子，但这基本上是代码: http://jsfiddle.net/yugv84qw/

如果您按打印并保存为 pdf(至少在 Chrome 中)，您会看到背景填满了整个页面。但是，当您包括

@page {
    margin: 1cm 0;
}

您会看到我想要的边距有效，但背景也使用了该边距。换句话说:我希望背景保持页面填充，同时每个页面上的文本都有顶部和底部边距。

Answer 1

您受到 CSS paged media module 的供应商实现的相当大的限制。 ，就是说，您可以使用 :first 伪选择器使用该模块来定位第一页，例如:

@page:first {
    margin: 0
}

如果支持/缺乏实现证明是一个问题 - 您将需要求助于将您的内容添加到一系列与输出页面尺寸匹配的元素中，然后删除第一个的边距/填充。

遗憾的是，即使在当今时代，从网络上控制打印也不是一个容易的过程。