如何使打印页面的背景与其他打印页面不同？

Question

如何使打印页面的背景与其他打印页面不同？

4

有没有办法使打印页面的第一页背景与其他页面背景不同？

还有，每个页面的边距是否可以不同？

我尝试了不同的解决方案，但都没有成功；这是我尝试过的解决方案：

       @page {
            margin: 0px;
        }
        @page :first {
             background: none;
             margin-bottom: 60px;
        }
        @media print {
            body {
                background: url('../img/background.jpg') repeat-y !important;
            }
        }

- Miheretab Alemu

1

你几乎无法控制打印背景图像或颜色。打印机的默认设置是“不打印背景图像”。但是，这里有一篇关于另一种方法的绝佳文章：https://dev59.com/T2w15IYBdhLWcg3wWqZ0 - Wim Mertens

@SergChernata 是的，它适用于所有页面而不仅仅是第一页，并且背景在“@page :first”上根本不起作用。 - Miheretab Alemu

1

@Miheretab Alemu 我知道，这就是为什么它是一条评论而不是答案。我认为分享这个信息会很有用。 - Wim Mertens

不确定您是想让您的代码工作还是想要一个解决方案，我会将所有页面放在自己的容器中，然后在特定的div上打印时强制进行分页，这样您就可以轻松地为div设置样式。 - Moses Davidowitz

@MosesDavidowitz 我想要一个解决方案。 - Miheretab Alemu

显示剩余4条评论

3个回答

1

关于@page的文档中提到：

您只能更改文档的页边距、孤行、孤页和分页。尝试更改任何其他CSS属性将被忽略。

看起来似乎无法仅更改第一页（使用@page）的背景。

- spencer.sm

0

构建一个函数，将一个类添加到第一个容器中，然后调用window.print()函数。这个类将类似于：

.div_with_bg {
height: 3508px; 
width: 2480px; 
background: url('../img/background.jpg');
background-repeat: repeat-y;}

- A. Meshu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Moses Davidowitz · Accepted Answer

我认为你无法使用:second来完成此操作，因为它似乎不是一个有效的值。

请参见标准伪类索引。

即使您只使用 :first，如上面链接所述，我也认为背景图像不能应用。

由于您已经尝试了不同的解决方案，但没有工作，这里有一个解决方案供您参考。

根据您的网站布局和要求，您可以估计要在何处分页，并将其包围在自己的容器中，以便在打印时可以完全控制。

请参见示例代码：

window.print();

body{
   background-color: black;
   margin: 0px;
}
.page-break{
   height: 1054px;
   width: 100%;
   margin: 0px;
   position: relative;
}
#first{background-color: green;}
#second{background-color: pink;}
h1{
  padding-top: 5px;
   text-align: center;
   color: white;
   margin: 0px; //Add margin 0px for the first div in page-break
}
h2{
  text-align: center;
  color: lightblue;
}

@page {
    margin: 0;
}

@media print {
    html, body {
        //style body here
    }
.page-break{
       page-break-before: always;
   }    
    #first{
    background-color: maroon;  
      -webkit-print-color-adjust: exact; 
   }
   #second{
    background-color: gray;
      -webkit-print-color-adjust: exact;
   }
  #third{
       //style the third page;
  }
}

<div class="page-break" id="first">
   <h1>First Page header</h1>
   <h2>Some text here </h2> 
</div>

<div class="page-break" id="second">
   <h1>Second page header</h1>
   <h2>Some text here </h2>
</div>

<div class="page-break" id="third">
   <h1>Third page header</h1>
   <h2>Some text here </h2>
</div>