[css]웹페이지 인쇄 스타일 백그라운드 나오지 않는 문제 해결

By
markettraders
-
0
16554

웹페이지 인쇄 스타일 적용하는 방법에 대해서 알아봤는데 이번에는 백그라운드 background 로 지정된 이미지 혹은 컬러가 나오지 않는 문제의 해결방안을 알아보겠습니다.

백그라운드 출력방법

-webkit-print-color-adjust 속성은 웹킷 엔진을 기반으로 한 브라우저에서 배경색과 이미지를 강제로 인쇄하는 데 사용할 수 있는 방법입니다. color-adjust 속성의 값에는 economy, exact 2개가 존재합니다.

  • economy 의 경우 배경색과 이미지는 사용자가 브라우저의 인쇄 설정 대화 상자에서 명시적으로 허용한 경우에만 인쇄됩니다.
  • exact 의 경우에는 배경색과 이미지가 항상 인쇄되며 사용자의 인쇄 설정은 무시됩니다.
@media print {
  // 백그라운이미지가 출력되지 않아 적용
      * {
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important; /*Firefox*/
      }
}