如何控制 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="logo.png">
   <img src="letterhead.png">
</div>

这将在打印模式下隐藏具有“noPrint”类的元素，而仅在打印页面上显示具有“onlyPrint”类的元素。

以上是如何控制 CSS 中打印的内容可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！