CSS에서 인쇄할 때 콘텐츠 가시성을 제어하는 ​​방법은 무엇입니까?

인쇄 관련 CSS: 선택한 콘텐츠 표시

웹 개발에서는 사용자의 인쇄 여부에 따라 특정 콘텐츠의 표시 여부를 제어해야 하는 시나리오가 발생할 수 있습니다. 페이지를 인쇄합니다. CSS는 "@media print" 기능을 통해 이에 대한 솔루션을 제공합니다.

브라우저 지원

대부분의 주요 브라우저는 "@media print"를 지원하여 인쇄 스타일을 보장합니다. 최신 장치에서 작동합니다.

인쇄 불가능 숨기기 요소

인쇄 시 선택한 요소만 표시하려면 두 가지 방법으로 접근할 수 있습니다.

직접 태그 지정 방법:

1. 인쇄하려는 요소에 "printable" 클래스를 추가하세요.
2. 숨기려면 "@media print"를 사용하세요. "인쇄 가능" 클래스를 제외한 모든 요소:

@media print {
  * { display: none; }
  .printable, .printable > * { display: block; }
}

부정 선택 방법:

1. 인쇄 가능한 요소에 태그를 지정하는 대신 다음을 수행할 수 있습니다. 인쇄할 수 없는 항목 모두 숨기기 요소:

@media print {
  body *:not(.printable *) { display: none; }
}

링크 및 로고 처리

인쇄할 수 없는 요소를 숨기는 것 외에도 로고나 레터헤드 정보만 표시할 수도 있습니다. 인쇄된 페이지에. 이는 다음 접근 방식을 사용하여 달성할 수 있습니다.

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

<div class="noPrint">
   <a href="links.html">Links</a>
</div>
<div class="onlyPrint">
   <img  src="/static/imghwm/default1.png" data-src="logo.png" class="lazy" alt="CSS에서 인쇄할 때 콘텐츠 가시성을 제어하는 ​​방법은 무엇입니까?" >
   <img  src="/static/imghwm/default1.png" data-src="letterhead.png" class="lazy" alt="CSS에서 인쇄할 때 콘텐츠 가시성을 제어하는 ​​방법은 무엇입니까?" >
</div>

이렇게 하면 인쇄 모드에서 "noPrint" 클래스가 있는 요소가 숨겨지고 인쇄된 페이지에만 "onlyPrint" 클래스가 있는 요소가 표시됩니다.

위 내용은 CSS에서 인쇄할 때 콘텐츠 가시성을 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!