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

이 질문 은 이전에 요청 되었지만 내 경우에는 해결책이 적용되지 않습니다. 특정 배경 이미지가 페이지에 통합되어 인쇄되도록하고 싶습니다. (CSS 스프라이트로 사용되는 이미지가 여러 개 있기 때문에 페이지에서 직접 이미지가 아닙니다.)

같은 질문에 대한 또 다른 해결책 list-style-image은 모든 아이콘에 대해 다른 이미지가있는 경우에만 작동하며 CSS 스프라이트가 불가능한 경우에만 작동하는을 사용하는 것입니다.

아이콘이 인라인으로 된 별도의 페이지를 만드는 것 외에 다른 해결책이 있습니까?



답변

브라우저의 인쇄 방법을 거의 제어 할 수 없습니다. 기껏해야 SUGGEST 할 수 있지만 브라우저의 인쇄 설정에 “배경 이미지를 인쇄하지 않음”이있는 경우 페이지를 다시 작성하지 않고는 배경 이미지를 다른 콘텐츠 뒤에있는 떠 다니는 “전경”이미지로 전환 할 수있는 방법이 없습니다.


답변

Chrome 및 Safari -webkit-print-color-adjust: exact;를 사용하면 요소에 CSS 스타일 을 추가하여 배경색 및 / 또는 이미지를 강제로 인쇄 할 수 있습니다.


답변

기본적으로 브라우저에는 배경색 및 이미지 인쇄 옵션이 꺼져 있습니다. 이를 우회하기 위해 CSS에 몇 줄을 추가 할 수 있습니다. 다음을 추가하십시오.

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}


답변

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

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

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

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

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

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

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

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


답변

아래 코드는 나에게 잘 작동합니다 (적어도 Chrome에서는).

여백 및 페이지 방향 컨트롤도 추가했습니다. (세로, 가로)

<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>


답변

! important 속성을 사용해야합니다. 이렇게하면 인쇄 할 때 스타일이 유지 될 가능성이 크게 높아집니다.

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

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


답변

@ ckpepper02가 말했듯이 body content : url 옵션이 잘 작동합니다. 그러나 약간 수정하면 다음과 같이 : before 의사 요소를 사용하여 일종의 헤더 이미지를 추가하는 데 사용할 수 있습니다.

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

페이지 상단에 이미지가 표시되며 제한된 테스트에서 Chrome 및 IE9에서 작동합니다.

-hanz