[css] 브라우저가 CSS에서 배경 이미지를 인쇄하도록하려면 어떻게해야합니까?

CSS로 배경 이미지를 인쇄하는 방법을 찾았습니다. 배경이 어떻게 배치되어 있는지에 따라 약간 다르지만 내 응용 프로그램에서 작동하는 것 같습니다.

기본적으로 @media print 스타일 시트 끝에 하고 본문 배경을 약간 변경합니다.

예를 들어, 현재 CSS가 다음과 같은 경우 :

body {
background:url(images/mybg.png) no-repeat;
}

스타일 시트 끝에 다음을 추가합니다.

@media print {
body {
   content:url(images/mybg.png);
  }
}

이렇게하면 이미지가 본문에 “전경”이미지로 추가되어 인쇄 가능하게됩니다. z-index적절 하게 만들기 위해 몇 가지 추가 CSS를 추가해야 할 수도 있습니다 . 그러나 다시 말하지만, 페이지가 어떻게 배치되는지에 달려 있습니다.

이것은 인쇄보기에 표시 할 헤더 이미지를 가져올 수 없을 때 저에게 효과적이었습니다.

답변

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

@media print {
  body:before { content: url(img/printlogo.png);}
}