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.

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

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?

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

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.

回答1:

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.

来源：https://stackoverflow.com/questions/27841505/css-print-background-with-margin

标签

css

printing