如何使用 CSS 媒体查询仅打印特定 Div？

使用 CSS 媒体查询打印特定内容

仅打印网页上特定 div 的请求在尝试保留时提出了挑战它的外观并排除不需要的元素。使用 CSS 媒体查询可以有效解决此问题。

以下 CSS 代码片段提供了一个解决方案，允许您在不影响页面上其他内容的情况下打印指定的 div：

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

在此 CSS 代码中：

• @media print {} 块定义特定于打印的样式。
• body 元素是分配的可见性：隐藏以隐藏页面上的所有其他元素。
• #section-to-print div（包含所需的内容）已分配可见性：可见以确保其在打印中的外观。
• position:absolute 以及 left:0 和 top:0 确保 div 正确定位在可打印区域。

通过使用此方法，您可以打印所需的 div，而不触发新的打印预览对话框或更改原始页面布局。

以上是如何使用 CSS 媒体查询仅打印特定 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！