css페이지 인쇄 시 배경색 보이지 않을 때

인쇄 (Ctrl + P)

HTML 페이지의 background-color 속성이 인쇄 미리보기에 적용되지 않는 현상이 발생

인쇄 미리보기 시 배경색이 전부 사라짐

 

print-color-adjust

@media print {
	body {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact; /*크롬*/
        	color-adjust: exact; /*파이어폭스*/
	}
}

 

print-color-adjust는 economy와 exact 둘 중 하나를 지정해야 함

 

기본값은 economy 임

이 속성을 exact로 설정하면 보이는 화면을 정확히(exactly) 표시하게 됨.

 

---

대안

사용자가 인쇄 설정에서 직접 배경 그래픽을 체크하여 인쇄하도록 하는 방법도 있음

 

인쇄 설정에서 설정 더보기 > 옵션 > 배경그래픽을 체크해주면

내가 설정했던 background-color가 미리보기에서도 보여짐.