打印longread html时如何让背景图片在每一个打印页面显示

核心原因 #

绝大多数浏览器打印渲染时，默认只会将body元素的背景渲染在第一页，同时部分浏览器默认关闭了「打印背景图形」开关，也会导致背景无法正常显示。

方案1：直接修改现有CSS规则 #

替换你当前的打印媒体查询代码即可：

@media print {
  /* 强制浏览器渲染背景图形 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* 同时给html、body设置背景属性 */
  html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url("something.jpg") !important;
    background-repeat: repeat !important;
    /* 下面的背景属性按你的实际需求调整即可 */
    background-size: cover !important;
    background-position: center center !important;
    /* 关键属性：固定背景，分页时也会跟随渲染 */
    background-attachment: fixed !important;
  }
}

方案2：兼容性更强的固定伪元素方案 #

如果方案1在你的目标浏览器上不生效，可以改用固定定位伪元素实现，固定元素会在每一个打印分页重复渲染：

@media print {
  /* 强制浏览器渲染背景图形 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image: url("something.jpg") !important;
    background-repeat: repeat !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

必要的浏览器设置 #

打印前需要在浏览器打印预览页的「更多设置」中，开启「打印背景图形」/「背景」选项，否则所有背景相关的设置都不会生效。

内容的提问来源于stack exchange，提问作者EnikiBeniki