[分享]css3打印保留背景图

CSS3能够让我们在打印时保留背景图，可以让我们的打印效果更加美观和专业。下面我们将介绍如何实现这一功能。media print { body { webkitprintcoloradjust: ex...

CSS3能够让我们在打印时保留背景图，可以让我们的打印效果更加美观和专业。下面我们将介绍如何实现这一功能。

@media print {
  body {
    -webkit-print-color-adjust: exact; /* Safari 和 Chrome */
    color-adjust: exact; /* Firefox */
    background-image: url(background.jpg);
    background-size: cover;
  }
} 

首先，在样式表中的@media print中添加上述代码，其中-webkit-print-color-adjust: exact;和color-adjust: exact;是为了确保打印中的颜色准确无误。

接着，我们通过background-image: url(background.jpg);设置打印页的背景图，background-size: cover;让背景图自适应。

通过使用CSS3打印保留背景图，我们可以更好地呈现我们的打印文件，使其更有吸引力和可读性。