[google-chrome] 인쇄 미리보기에 배경색이 표시되지 않음

페이지를 인쇄하려고합니다. 이 페이지에서 테이블에 배경색을 지정했습니다. 크롬에서 인쇄 미리보기를 볼 때 배경색 속성을 사용하지 않습니다 …

그래서 나는이 속성을 시도했다 :

-webkit-print-color-adjust: exact;

그러나 여전히 색상을 표시하지 않습니다.

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact;
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

답변

Chrome CSS 속성 -webkit-print-color-adjust: exact;은 적절하게 작동합니다.

그러나 인쇄를 위해 올바른 CSS가 있는지 확인하는 것이 까다로울 수 있습니다. 어려움을 피하기 위해 몇 가지 일을 할 수 있습니다. 먼저 모든 인쇄 CSS를 화면 CSS와 분리하십시오. 이것은 통해 이루어집니다 @media print및 @media screen.

종종 @media print인쇄 할 때 다른 CSS를 모두 포함하기 때문에 일부 추가 CSS를 설정하는 것만으로 는 충분하지 않습니다. 이 경우 인쇄 규칙이 인쇄되지 않은 CSS 규칙에 대해 자동으로 이기지 않으므로 CSS 특이성을 알아야합니다.

귀하의 경우에는 -webkit-print-color-adjust: exact작동합니다. 그러나 귀하 background-color와 색상 정의는 더 높은 특이성을 가진 다른 CSS에 의해 뛰어납니다.

거의 모든 환경에서 사용 하는 것을 보증 하지는 않지만!important 다음 정의가 올바르게 작동하고 문제를 노출시킵니다.

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact;
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

여기입니다 바이올린 (및 내장 인쇄 미리보기의 용이성을 위해).

답변

그 CSS 속성은 나에게 필요한 전부입니다 … Chrome에서 미리 볼 때 BW 및 Color ( Color : Options- Color 또는 Black and white ) 를 볼 수있는 옵션이 있으므로 해당 옵션이 없으면 이 Chrome 확장 프로그램을 가져 와서보다 편리하게 사용하시기 바랍니다.

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=ko

바이올린에 추가 한 사이트는 미디어 인쇄 CSS에서 이것을 필요로합니다 (추가해야합니다 …

본문에 미디어 인쇄 CSS :

@media print {
body {-webkit-print-color-adjust: exact;}
}

UPDATE
OK 그래서 문제는 bootstrap.css입니다 … 미디어 인쇄 CSS가 있고 당신도 할 수 있습니다 …. 제거하고 색을 주어야합니다 …. 당신은 스스로 할 필요가 있습니다. 부트 스트랩은 CSS를 인쇄합니다.

이 인쇄를 클릭하면 색상이 보입니다 ….
http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

답변

배경 그래픽 설정이 꺼져 있으면 Chrome에서 인쇄시 배경색 또는 다른 여러 스타일을 렌더링하지 않습니다.

이것은 css, @media 또는 specificity와 관련이 없습니다. 주변을 해킹 할 수는 있지만 크롬이 배경색 및 기타 그래픽을 표시하는 가장 쉬운 방법은 추가 설정 에서이 확인란을 올바르게 선택하는 것입니다.

답변

!important배경색 태그에 속성 을 추가하여 표시하려면 웹킷 부분이 필요하지 않았습니다.

background-color: #f5f5f5 !important;

답변

부트 스트랩 또는 다른 타사 CSS를 사용하는 경우 미디어 화면 만 지정해야합니다. 따라서 CSS 파일에서 인쇄 미디어 유형을 제어 할 수 있습니다.

<link rel="stylesheet" media="screen" href="">

스 니펫 확장

답변

CSS는 다음과 같아야합니다.

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;
}

답변

BOOTSTRAP.CSS를 사용하는 사람에게는 이것이 수정입니다!

bootstrap.css가 @media print모든 색상, 배경색, 그림자 등을 재설정 하는 매우 성가신 것을 발견 할 때까지 모든 솔루션을 시도했지만 작동하지 않았습니다 …

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

따라서 bootstrap.css (또는 bootstrap.min.css)에서이 섹션을 제거하십시오.

또는 직접 인쇄하려는 페이지의 CSS에서이 값을 무시하십시오. @media print

@media print {
  body {
    -webkit-print-color-adjust: exact;
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}