CSS @media打印问题与背景颜色;

我试图为我们的应用程序制作一个可打印的样式表，但我在@media打印的背景颜色有问题。

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

其他一切工作，我可以修改边界和这样，但背景色不会通过打印。我知道，如果没有更多细节，你们可能无法回答我的问题。我只是好奇是否有人有这个问题，或类似的，以前。

当前回答

试试这个，它为我谷歌Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

2013-03-06 14:27:01

其他回答

两个解决方案的工作(至少在现代Chrome -还没有测试超越):

!重要的权利在常规的CSS声明作品(甚至不是在@media打印) 使用svg

2013-06-07 04:56:44

我想我应该从最近的打印css经验中添加一个最近和2015年的相关帮助。

无论打印对话框设置如何，都能够打印背景和颜色。

为了做到这一点，我必须使用!important & -webkit-print-color-adjust:exact !important的组合来正确地打印背景和颜色。

此外，在声明颜色时，我发现最顽固的地方需要直接定义目标。例如:

<div class="foo">
 <p class="red">Some text</p>
</div>

和你的CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

2015-09-30 04:23:10

在2016/10测试和工作在Chrome, Firefox, Opera和Edge。应该可以在任何浏览器上工作，并且看起来应该总是像预期的那样。

好的，我做了一个跨浏览器的打印背景色的实验。只是复制，粘贴和享受!

这里是一个完整的可打印的HTML页面引导:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

2016-10-15 18:03:20

明白了:

CSS: