Chrome의 인쇄 미리보기에 내 테이블의 배경색이 표시되지 않는 이유는 무엇입니까?

인쇄 미리보기에서 배경색이 제외됩니다

웹 페이지 인쇄 시 지정된 배경색이 인쇄 미리보기에 나타나지 않을 수 있습니다. 특히, 표에 할당된 배경색이 Chrome의 인쇄 미리보기에 표시되지 않습니다.

다음 CSS 속성이 성공적으로 적용되지 않았습니다.

-webkit-print-color-adjust: exact;

문제 해결

CSS 속성이 print-color-adjust인 동안:exact; 올바르게 작동하려면 인쇄 시 원하는 CSS가 적용되도록 하는 기본적인 문제 해결 단계가 있습니다.

1. 화면 CSS에서 별도 인쇄:

   • 인쇄용 CSS 스타일(@media print)과 화면 표시용 CSS 스타일(@media)을 구별하기 위한 미디어 쿼리를 구현합니다. 화면).

2. CSS 특이성 증가:

   • 이 경우 인쇄 색상 조정 속성이 작동합니다. , 그러나 더 높은 구체성을 가진 다른 CSS 규칙이 이를 덮어쓰고 있습니다. 이 문제를 해결하려면 @media 인쇄 규칙에서 !important 선언을 사용하세요.

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

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

위 내용은 Chrome의 인쇄 미리보기에 내 테이블의 배경색이 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!