CSS @media print issues with background-color;

I'm new here at this company and we have a product that uses miles of css. I'm attempting to make a printable stylesheet for our app but i'm having issues with background-color in @media print...

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

everything else works, i can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question with out more details, I was just curious if anyone had this issue, or something similar, before.

标签： css media-queries

17条回答

路过你的时光

2楼-- · 2018-12-31 22:11

IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

Once that is set so it will print background colours and images, what you have there will work.

It is found in different spots. In IE9beta it's found in Print->Page Options under Paper options

In FireFox it's in Page Setup -> [Format & Options] Tab under Options.

0人赞添加讨论(0) 举报

君临天下

3楼-- · 2018-12-31 22:11

Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.

Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!

Here it is a full printable HTML page for bootstrap:

<!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>

0人赞添加讨论(0) 举报

梦该遗忘

4楼-- · 2018-12-31 22:12

To enable background printing in Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}

0人赞添加讨论(0) 举报

怪性笑人.

5楼-- · 2018-12-31 22:12

If you are looking to create "printer friendly" pages, I recommend adding "!important" to your @media print CSS. This encourages most browsers to print your background images, colors, etc.

EXAMPLES:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

0人赞添加讨论(0) 举报

柔情千种

6楼-- · 2018-12-31 22:16

-webkit-print-color-adjust: exact; alone is Not enough you have to use !important with the attribute

this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag

and this is printing preview on chrome before adding !important

now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule

0人赞添加讨论(0) 举报

长期被迫恋爱

7楼-- · 2018-12-31 22:19

Two solutions that work (on modern Chrome at least - haven't tested beyond):

!important right in the regular css declaration works (not even in the @media print)
Use svg

0人赞添加讨论(0) 举报

1 2 3 下一页

CSS @media print issues with background-color;

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间