如何控制 CSS 中列印的內容可見性？

列印特定CSS：顯示選定內容

在Web 開發中，您可能會遇到需要根據使用者是否正在控制特定內容的可見性的場景列印一頁。 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中文網其他相關文章！