在页面上发生打印预览时，div背景颜色不会出现

Question

我的页面中有一个div：

<div id="div1>

welcome
</div>

我需要使用css为此div设置背景颜色。所以我在页面中使用了背景色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属性添加到background-color标记上，以便显示它，您不需要web-kit标记，甚至需要将它包装在@print中。< / p>

background-color: #f5f5f5 !important;