Question

我正在使用laravel 5.4，但未在打印预览中显示。该怎么办..？

.bg {
  @media print {
    visibility: visible;
    /* The image used */
    background-image: url("../logo/back_id_card.JPG");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-print-color-adjust: exact;
  }
}

Answer 1

请尝试此操作以查看问题是否仍然存在（适用于所有元素*）：

@media print {
    * {
        -webkit-print-color-adjust: exact;
    }
}

-webkit-print-color-adjust属性是非标准CSS扩展，可用于在基于WebKit引擎的浏览器中强制打印背景色和图像。

Answer 2

我认为您的代码有误：

这应该是：

.bg {
  @media print {
    visibility: visible;
    /* The image used */
    background-image: url("../logo/back_id_card.JPG");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-print-color-adjust: exact;
  }
}

赞！

@media print {
 .bg {
    visibility: visible;
    /* The image used */
    background-image: url("../logo/back_id_card.JPG");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-print-color-adjust: exact;
   }
}

.bg应该放在@media print内部，而不是相反。

希望这对您有所帮助。

在打印预览中不显示背景图像

2 个答案: