页面上发生打印预览时没有出现div背景颜色

Question

我的页面中有一个 div：

<div id="div1>

welcome
</div>

我需要使用 css 为这个 div 设置背景颜色。所以我在我们的页面中使用了 background-color css，它按预期工作，但是当我尝试打印它时，它没有显示相应的颜色。

所以，我尝试使用媒体代码。它可以在chrome浏览器中使用，但我不知道它是否可以在所有浏览器中使用。

@media print {
        #div1 {
            background-color: #E42314 !important;
            -webkit-print-color-adjust: exact; 

        }
    }
    #div1 {
        background-color: #E42314 !important;
    }

Answer 1

在浏览器的打印设置中有这个选项，你需要翻转“显示背景颜色和图像”。

因为这是浏览器设置，所以无法通过代码设置。

例如，如果您使用的是 Chrome，打印选项将如下所示：

对于 IE，它看起来像这样：

Answer 2

您只需将!important 属性添加到背景颜色标签上即可显示，您不需要web-kit 标签，甚至不需要将其包裹在@print 中。

background-color: #f5f5f5 !important;