如何使 HTML 元素仅在打印页面时显示？答案

【问题标题】：How to make HTML element to be displayed only when page is printed?如何使 HTML 元素仅在打印页面时显示？
【发布时间】：2016-07-05 05:56:41
【问题描述】：

我有这个 html 元素：

<img src="@Url.Content("~/Content/images/logo.png")" style="width:150px;height:80px;" alt="" />

如何使上面的元素只在页面打印时显示，而在网页中必须隐藏。

知道如何实现吗？

【问题讨论】：

【解决方案1】：

当 Bootstrap 为您提供工具时，您无需创建自己的 CSS...

遵循引导合成器：

<img class="visible-print-block" src="@Url.Content("~/Content/images/logo.png")" style="width:150px;height:80px;" alt="" />

这里有一些特定于打印状态的类：

.visible-print-block
.visible-print-inline
.visible-print-inline-block

【讨论】：

【解决方案2】：

做这样的事情：

在网络模式下 - 它会被隐藏：

#printOnly {
  display : none;
 }

在打印模式下 - 会显示：

 @media print {
  #printOnly {
  display : block;
 }
}

将您的图片放入div id=printOnly

【讨论】：

【解决方案3】：

也许像

@media screen
{
    .noPrint{}
    .noScreen{display:none;}
}

@media print
{
    .noPrint{display:none;}
    .noScreen{}
}

【讨论】：