Question

我想在屏幕上隐藏图像/徽标，但希望它在打印时显示。我的努力没有奏效。我的代码出了什么问题？

<style>
@media print {
   #othersections, #ebooknav {display: none;}
   #test {width: 100%; margin-top: 150px;}
   #printlogo {display: block; margin-top: 0px;}
             }
</style>
<script>
function myFunction() {
    window.print();
}
</script>
<div id="printlogo" style="display: none;"><img src="/images/logo.png" /></div>
<div id="test" style="margin-right:220px; float:left;">
Content to be printed
</div>
<div id="ebooknav">
<a href="" title="Print Page" onclick="myFunction()"><img src="/printbutton.png" /></a>
</div>

Answer 1

感谢BoltClock提供的线索。我意识到这是由于样式优先级的冲突造成的。样式可以根据以下内容相互覆盖（来源：w3schools: cascading order of multiple styles）：

内联样式（在HTML元素中） - 最高优先级
内部样式表（在头部）
外部样式表
浏览器默认值 - 最低优先级

在上面的问题中，我删除了内联样式并将其放在内部样式表中，或者我也可以稍后将其放在外部样式表中：

<style>
@media screen {
   #printlogo {display: none;}
              }
@media print {
   #othersections, #ebooknav {display: none;}
   #test {width: 100%; margin-top: 150px;}
   #printlogo {display: block; margin-top: 0px;}
             }
</style>
<script>
function myFunction() {
    window.print();
}
</script>
<div id="printlogo"><img src="/images/logo.png" /></div>
<div id="test" style="margin-right:220px; float:left;">
Content to be printed
</div>
<div id="ebooknav">
<a href="" title="Print Page" onclick="myFunction()"><img src="/printbutton.png" /></a>
</div>

它终于奏效了！

如何显示有关打印的部分但将其隐藏在屏幕上？

1 个答案: