Question

是否有任何解决方案可以使首页背景与打印页面的其他页面背景不同？

还要为每个页面设置不同的边距吗？

我尝试了不同的解决方案，但没有奏效;这是我试过的解决方案：

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

Answer 1

我不认为您可以使用:second来实现此目的，因为它似乎不是有效值。

请参阅Index of standard pseudo-classes。

即使您只使用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>

Answer 2

来自@page的文档：

您只能更改边距，孤儿，寡妇和分页符该文件。尝试更改任何其他CSS属性将是忽略。

看起来只能更改第一个打印页面的背景（使用@page）。

Answer 3

构建一个函数，将一个类添加到第一个容器，然后调用window.print（）函数。这个类看起来像那样：

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

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

3 个答案: