Print backgroud color

Overview : 프린트시 백그라운드 컬러 나오게 하기

프린트할 때 배경색 유지하기


<style>
  @media print {
    .print-style {
      -webkit-print-color-adjust: exact; /* Chrome, Safari 등 웹킷 기반 브라우저용 */
      print-color-adjust: exact; /* 표준 속성 */
    }
  }
</style>

<style>

@media print {

.print-style {

-webkit-print-color-adjust: exact; /* Chrome, Safari 등 웹킷 기반 브라우저용 */

print-color-adjust: exact; /* 표준 속성 */

}

</style>

대부분의 브라우저는 기본적으로 프린트 시 배경색을 출력하지 않도록 설정되어 있습니다. 이를 해결하기 위해, @media print 규칙을 사용하여 프린트할 때 배경색이 출력되도록 설정할 수 있습니다.

html + css


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Print Background Example</title>
  <style>
    @media print {
      .print-style {
        -webkit-print-color-adjust: exact; /* For webkit-based browsers like Chrome and Safari */
        print-color-adjust: exact; /* Standard property */
      }
    }
  </style>
</head>
<body>
  <div class="print-style" style="background-color: yellow; color: black; padding: 10px;">
    This text will have a background color when printed.
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Print Background Example</title>

<style>

@media print {

.print-style {

-webkit-print-color-adjust: exact; /* For webkit-based browsers like Chrome and Safari */

print-color-adjust: exact; /* Standard property */

}

</style>

</head>

<body>

This text will have a background color when printed.

</div>

</body>

</html>