인쇄 페이지의 배경을 다른 인쇄 페이지와 다르게 만드는 방법은 무엇입니까?

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을 사용하더라도 위의 링크에서 설명한대로 배경 이미지를 적용 할 수 있다고 생각하지 않습니다.

이미 다른 솔루션을 사용해 보았지만 제대로 작동하지 않았으므로 여기에 해결책이 있습니다.

사이트 레이아웃 및 요구 사항에 따라 페이지를 중단하려는 위치를 예측하고 인쇄 할 때 페이지를 완전히 제어 할 수 있도록 자체 컨테이너에 추가 할 수 있습니다. @page 대한 문서에서

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{ 
 
\t background-color: maroon; 
 
     -webkit-print-color-adjust: exact; 
 
    } 
 
    #second{ 
 
\t 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

:

는 예제 코드를 참조에만 의 여백, 고아, 과부, 및 페이지 나누기를 변경할 수 있습니다

문서. 다른 CSS 속성을 변경하려고하면 이 무시됩니다.

첫 번째 인쇄 된 페이지의 배경을 변경하는 것만 같습니다 (@page 사용).

Answer 3

클래스를 첫 번째 컨테이너에 추가하고 window.print() 함수를 호출하는 함수를 빌드하십시오. 클래스는 다음과 같이 표시됩니다.

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