CSS 仅在打印页面上可见的元素

在本文中，我们将介绍如何使用CSS来控制元素在打印页面上的可见性。有时候，我们希望某些元素只在打印页面中显示，而不在屏幕上显示。这对于创建打印友好的页面或者打印预览很有帮助。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

CSS @media规则

要控制元素在打印页面上的可见性，我们可以使用CSS的@media规则来指定只在打印媒体上生效的样式。@media print表示只在处理打印时应用样式的媒体类型。

下面是一个示例，展示了如何使用@media规则来隐藏在打印页面上不可见的元素：

@media print {
  .no-print {
    display: none;
  }
}

上面的代码将所有带有no-print类的元素在打印页面上隐藏。这意味着这些元素将在屏幕上可见，在打印时不可见。

示例：打印友好的隐藏元素

假设我们有一个网页，其中包含了一些额外的功能按钮，我们希望在打印页面上隐藏这些按钮。我们可以给这些按钮添加一个自定义的no-print类，并在CSS中定义对应的样式：

<button class="no-print">按钮1</button>
<button class="no-print">按钮2</button>
<button>普通按钮</button>

@media print {
  .no-print {
    display: none;
  }
}

如上所示，按钮1和按钮2都被添加了no-print类，而普通按钮没有。在打印页面上，只有普通按钮会显示出来，而带有no-print类的按钮将被隐藏。

示例：打印预览样式调整

有时候我们希望在打印预览时，元素的样式有所调整，以获得更好的打印效果。我们可以使用相同的@media print规则来为打印预览样式添加自定义样式。例如，我们希望在打印预览中隐藏页眉和页脚，可以使用下面的代码：

@media print {
  /* 隐藏页眉 */
  header {
    display: none;
  }

  /* 隐藏页脚 */
  footer {
    display: none;
  }
}

上面的代码将在打印预览时隐藏<header>元素和<footer>元素。

总结

通过使用@media print规则，我们可以非常灵活地控制元素在打印页面上的可见性。通过给需要隐藏的元素添加特定的类或者选择器，并在@media print中设置它们的样式，我们可以轻松地为页面创建定制的打印效果。这对于创建打印友好的页面、打印预览和打印输出都非常有用。希望本文对你的CSS开发工作有所帮助！