首页 >web前端 >css教程 >为什么 Chrome 的打印预览中不显示我的表格的背景颜色?

为什么 Chrome 的打印预览中不显示我的表格的背景颜色?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-24 14:28:11563浏览

Why Doesn't My Table's Background Color Show in Chrome's Print Preview?

打印预览不包括背景颜色

打印网页时,指定的背景颜色可能无法出现在打印预览中。具体来说,表格指定的背景颜色未在 Chrome 的打印预览中显示。

已应用以下 CSS 属性,但未成功:

-webkit-print-color-adjust: exact;

解决问题

虽然 CSS 属性 print-color-adjust:exact;功能正常,有基本的故障排除步骤可确保所需的 CSS 在打印时生效。

  1. 将打印与屏幕 CSS 分开:

    • 实现媒体查询以区分用于打印的 CSS 样式 (@media print) 和用于屏幕显示的 CSS 样式 (@media screen)。
  2. 增加 CSS 特异性:

    • 在这种情况下, print-color-adjust 属性起作用,但其他具有更高特异性的 CSS 规则会覆盖它。要解决此问题,请在 @media 打印规则中使用 !important 声明:
@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

以上是为什么 Chrome 的打印预览中不显示我的表格的背景颜色?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn