Domanda

I have a specific document. Background first and last page is different from the other pages of the document.

According to the question answered here: Flying Saucer hide header and footer on first page

The first page I defined using the trick @page :first:

@page{      
    background-image: url('... my regular background ...');
}
@page :first {      
    background-image: url('... first page background ... ');
}

How to change the background on the last page?

È stato utile?

Soluzione

If you know in advance what will be displayed on the last page, you can use CSS3 named pages.

Here is a simple example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <style type="text/css">
    .newpage{page-break-before:always}

    @page {@bottom-center {content: element(footer)}}
    #footer {position: running(footer);}

    @page last {@bottom-center {content: element(lastfooter)}}
    #lastfooter{position: running(lastfooter);}
    #lastpage  {page:last}
}
 </style>
</head>
    <body>  
        <div id="footer">Footer page 1 and 2</div>
        <div id="lastfooter">Footer for last page</div>

        <div>Page 1 content</div>
        <div class="newpage">Page 2 content</div>
        <div id="lastpage">Page 3 content</div>
    </body>
</html>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top