Question

我有一个模型页面，但是当我打印页面时，标题变为灰色。我使用了一张图片，因为您不需要在打印设置中启用背景和颜色。

当我更改打印设置中的边距时，颜色有效吗？有人知道这里发生了什么吗？

我的代码：

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
        <style type="text/css" media="all">

            @media print {
                .page-break { 
                    height:0; 
                    page-break-before:always; 
                    margin:0; 
                    border-top:none; 
                }
                a.afdrukken {
                    display: none;
                }
            }
            body, p, span, td, a, h1, h2{
                font-size:9pt;
                font-family: Arial, Helvetica, sans-serif;
            }
            body{
                margin-left:2em; 
                margin-right:2em;
                text-align:left;
            }
            .page{
                height:917px;
                page-break-after : always;   
                font-family: Arial, Helvetica, sans-serif;
                position:relative;
            }
            .header{
                height:50px;
                /*background-color:#FF9519;*/
            }
            .header{
                text-align:right;
                position: relative;
                overflow: hidden;
                background-color: #FF9519;
            }
            .header .website, .header .telefoon, .header .titel{
                color:#FFF;
                margin-right:10px;
                margin-top:10px;
                z-index: 100;
                    position: absolute;
            }
                .header .website {
                    color:#FFF;
                    right: 100px;
                } 
                .header .telefoon {
                    color:#FFF;
                    right: 10px;
                }
            .header .website{
                font-weight:bold;
                margin-right:10px;
            }
                .header .website a, .header .website a:visited,.header .website a:hover, .header .website a:active   {
                    color: #ffffff;
                    text-decoration: none;
                }
            .header .titel{
                color:#FFF;
                left: 0;
                font-weight:bold;
                margin-left:20px;
            }
            .container{
                border-left: 1px solid #FF9519;
            }
            .content{
                width: 75%;  
                color:#333;
                padding:15px;
                -webkit-column-count: 1; /* Chrome, Safari, Opera */
                -moz-column-count: 1; /* Firefox */
                column-count: 1;
                -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
                -moz-column-gap: 30px; /* Firefox */
                column-gap: 30px;
                -webkit-column-rule: 1px outset #FF9519; /* Chrome, Safari, Opera */
                -moz-column-rule: 1px outset #FF9519; /* Firefox */
                column-rule: 1px outset #FF9519;
            }
            h1{
                margin-left:15px;
                margin-bottom:0px;
                color: #FF9519;
                font-weight:lighter;
                font-size:24px;
            }
            h2{
                color:#000;
                margin-bottom:15px;
                margin-bottom:2px;
            }
            .inleiding{
                font-weight:bold;
            }
            a.afdrukken {
                margin-left: 25px;
                font-size: 12px;
                color: #333;
                cursor: pointer;
            }
            a.afdrukken img {
                border: 0;
            }   
            img.bgImage {
                position: absolute;
                height: 50px;
                width: 2000px;
                z-index: 50;
                left: 0;
            }
            .planningTable td {
                padding: 3px 15px 3px 0;
            }
        </style>
    </head>
    <body>
        <form method="post" id="Form1">

            <script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>

            <div class="page">
                <div class="header">
                    <img class="bgImage" src="/images/productblad/CUR_bg.png" alt=""/>
                    <div class="titel">Cursussen</div>


            <div class="telefoon">0000000000</div>
                <div class="website"><a href='http://www.google.nl' target='_blank'>www.google.nl</a></div>
            </div>
            <div class="container">
                <h1>Header<a class="afdrukken" onclick="$('.cboxIframe', window.parent.document).get(0).contentWindow.print();"><img src="/Images/icons/printButton.png" alt=""/> Print</a></h1>
                <div class="content">
                </div>
            </div>
        </div>
    </form>
</body>

Answer 1

我必须在答案中发布这个，因为我还不能发表评论，但我认为你应该能够在这些帖子中找到答案：

图像在打印IE上变灰

1 个答案: