CSS CSS：打印机友好的标题可见性样式

Posted 2021-05-23

This solution applies to a header pair defined as follows:

<div id="header-normal">...</div><img id="header-printer-version" src="/location/to/your/print-header.jpg" width="0" height="0" />


You can specify your different media stylesheets as follows:

<link rel="stylesheet" href="screen-style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print-style.css" type="text/css" media="print" />



screen-style.css
==========

#header-normal {
  display: block;
  width: 800px;
  height: 220px;
  background: url(/location/to/your/normal-header.jpg) no-repeat;
}

#header-printer-version {
  float: left;
  width: 0px;
  height: 0px;
  visibility: hidden;
}

print-style.css
================

#header-normal {
  display: none;
}

#header-printer-version {
  float: left;
  width: 600px;
  height: 150px;
  visibility: visible;
}