带边距的 CSS 打印背景 [英] CSS print background with margin

问题描述

我正在尝试制作适合打印的简历.一切正常，除了与背景图片有关的问题.

I am trying to make a print-friendly resume. Everything is working, except for an issue regarding the background image.

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

I do not want to have any margin on the print page, since otherwise the background image looks messed up: 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

However, if I do not use any margins, the background looks good but I am unable to do any margin on the second (or other pages): https://www.dropbox.com/s/16vgu3nahfgeipr/Screenshot%202015-01-08%2014.38.55.png?dl=0

body {
    margin: 30px 0;
}

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

That works for the first page, but unfortunately this does not work for any page breaks. Is there a way to do padding/margin in relation to the top/bottom of a print page?

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

sorry for the hideous example, but this is basically the code: http://jsfiddle.net/yugv84qw/

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

If you press print and save to pdf (in Chrome at least), you'll see that the background fills the entire page. However, when you include

@page {
    margin: 1cm 0;
}

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

You will see that the margin I want works, but then the background also uses that margin. In other words: I want the background to stay page filling, while there is a top and bottom margin for text on every page.

推荐答案

CSS 分页媒体模块，也就是说，您可以使用该模块通过使用 :first 伪选择器来定位第一页，例如:

You are fairly limited by the vendor implementation of the CSS paged media module, that said, you are able to use the module to target the first page by using the :first psuedo selector, e.g.:

@page:first {
    margin: 0
}

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

Should support / lack of implementation prove an issue- you will need to resort to adding your content into a series of elements which match the output page dimensions, then removing the margin/padding on the first.

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

Sadly, the control of printing from the web, even in this day and age, is not an easy process.

这篇关于带边距的 CSS 打印背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！