Question

我有一个html页面，该页面从数据库获取内容，并根据该内容的行为打印页面。问题是在每个打印页面上背景图像设置不正确。背景图像在每个打印页面上都像水印一样。

每个打印页面上的背景图像结果应如下所示：

proper print on each page

但是我得到的印刷结果就是这些问题。

1）单个打印页面中的图像显示两次。

repeat image background

2）第二个主要问题是，内容完成后，图像将显示为一半。

on content finish image shown in half

这是html页面：

    <link rel="stylesheet" href="{{ URL::asset('assets/custom/css/print.css') }}">
  <link href="{{ URL::asset('assets/css/bootstrap.css') }}" rel="stylesheet" />
  <script src="{{ URL::asset('assets/custom/js/customMainFunction.js') }}"></script>
   <script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<div class="container">
<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-right">
        <?php echo CommonHelper::displayPrintButtonInBlade('PrintHrWarningLetter','','1');?>
    </div>
</div>
</div>
<br>
<div class="container print-container" id="PrintHrWarningLetter" style="page-break-after: always;">
    <div class="bg_image last_image">
        <div class="bg_color">
            <div class="print-font page">
                <div class="row warning-top-mar letter-head">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <p>{{date('F d, Y')}}</p>
                    </div>

                </div>

                <div class="row letter-head">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 war-margin1">
                        <p><b>Subject:</b>   <b class="bor-bot">Warning Letter</b></p>
                    </div>
                </div>

                <div class="row letter-head">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 warning-mar2">
                        <p class="warning-line-hei war-margin1 page" >
                            <?php echo nl2br($hr_warning_letter->letter_content1) ?>
                        </p>
                    </div>
                </div>

                <!--<?php if($hr_warning_letter->letter_content2 != '<p><br></p>') { ?>
                    <div class="row page-break2" style="margin-top:50px;">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 warning-mar2">
                            <p class="warning-line-hei war-margin1">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                            </p>
                        </div>
                    </div>
                <?php }?>-->
                <div class="row page-break2" style="margin-top:50px;">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 warning-mar2">
                        <p class="warning-line-hei war-margin1">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                        </p>
                    </div>
                </div>                  
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 warning-mar">
                        <p>Best Regards,</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-1  2 col-sm-12 col-xs-12 warning-mar">
                        <p>Human Resource Manager</br>
                            HR Department
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我正在使用的css：

 .warning-mar {
    margin-top: 20px;
}
.warning-mar2 {
        margin-top: 8px !important;
    }
.warning-right {
    float: right;
    padding-right:15px;
}
.print-font {
    padding: 20px;
    border: solid 1px #e8e6e6;
}
.table-padd {
    padding:5px !important;
}
tr>td.print-black {
        background-color: #cecdcd !important;
        -webkit-print-color-adjust: exact; 
    }
.mima-logo {
    height: 76px;
}
.text-bold {
    font-weight: bold;
}
.print-sett {
    line-height: 9px !important;    
    }
.bg_color {
        background-image:url('http://testing.sprucenetwork.com/assets/img/Apple-logo.png') !important;
        background-repeat:no-repeat !important;
        background-position: unset !important;
        background-size:100% !important;
        z-index:1000000px !important;
    }   
    .bg_image {
        background-image:url('http://testing.sprucenetwork.com/assets/img/Apple-logo.png') !important;
        background-repeat:repeat-y !important;
        background-position: center !important;
        background-size:100% !important;
        z-index:10 !important;

    }
    .page-break2 {
        page-break-before: always !important;
        padding: 10px 0px 10px 0px!important;
    }   
@media print {

    .letter-head {
        padding-right:140px !important;
    }
    tr>td.print-black {
        background-color: #cecdcd !important;
        -webkit-print-color-adjust: exact; 
    }
    .text-bold {
        font-weight: bold !important;
    }
    .warning-line-hei {
        line-height:17px !important;
        text-align:justify !important;
    }
    p {
        margin: 0px 0px 0px 0px !important;
    }

    .print-font2 {
        border:solid 0px #e8e6e600 !important;
        padding:10px 30px 0px 30px !important;
        font-size:14px !important;
        font-family: calibri !important;
        text-align: justify !important;
    }
    .print-font {
        padding: 10px 50px 45px 50px !important;
        border:solid 0px #e8e6e600 !important;
        font-size:14px !important;
        font-family: calibri !important;
        text-align: justify !important;
    }
    .warning-right {
        float: right !important;
        padding-right:30px !important;
    }
    .warning-mar {
        margin-top: 6px !important;
    }
    .war-margin1 {
        margin-top: 20px !important;
    }
    .warning-mar2 {
        margin-top: 8px !important;
    }
    .warning-top-mar {
        margin-top: 160px;
    }
    .bor-bot {
        border-bottom: solid 1px #000 !important;
    }
    .mima-logo {
        height: 66px !important;
    }
    .print-font-size {
        font-size:11px !important;
    }
    .print-head-size {
        font-size:20px !important;
    }
    .print-font-size2 {
        font-size:20px !important;
    }
    .print-sett {
        line-height: 9px !important;
        font-size: 11px !important;
    }
    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
        border:solid 1px #000 !important;
    } 
    .print-container {
        height:100% !important;
    }   
    .p-sett {
        visibility:hidden !important;
        color:#FFF !important:
    }
    .bg_image {
        background-image:url('http://testing.sprucenetwork.com/assets/img/Apple-logo.png') !important;
        background-repeat:repeat-y !important;
        background-position: unset !important;
        background-size:100% !important;
        z-index:10 !important;
    }
    .last-page {
        visibility:hidden !important:
    }
    .page-break {
        page-break-before: always !important;
        padding: 10px 0px 10px 0px!important;;
    }
    .page-break2 {
        page-break-before: always !important;
        padding: 10px 0px 10px 0px!important;
    }
}

Answer 1

据我所见，您在bg-color和bg图像类上两次调用了苹果徽标。结果，将出现两个苹果徽标。删除任何一个将仅产生1个徽标。

 .warning-mar {
    margin-top: 20px;
}
.warning-mar2 {
        margin-top: 8px !important;
    }
.warning-right {
    float: right;
    padding-right:15px;
}
.print-font {
    padding: 20px;
    border: solid 1px #e8e6e6;
}
.table-padd {
    padding:5px !important;
}
tr>td.print-black {
        background-color: #cecdcd !important;
        -webkit-print-color-adjust: exact; 
    }
.mima-logo {
    height: 76px;
}
.text-bold {
    font-weight: bold;
}
.print-sett {
    line-height: 9px !important;    
    }
.bg_color {
        background-repeat:no-repeat !important;
        background-position: unset !important;
        background-size:100% !important;
        z-index:1000000px !important;
    }   
    .bg_image {
        background-image:url('http://testing.sprucenetwork.com/assets/img/Apple-logo.png') !important;
        background-position: center !important;

    }
    .page-break2 {
        page-break-before: always !important;
        padding: 10px 0px 10px 0px!important;
    }   
@media print {

    .letter-head {
        padding-right:140px !important;
    }
    tr>td.print-black {
        background-color: #cecdcd !important;
        -webkit-print-color-adjust: exact; 
    }
    .text-bold {
        font-weight: bold !important;
    }
    .warning-line-hei {
        line-height:17px !important;
        text-align:justify !important;
    }
    p {
        margin: 0px 0px 0px 0px !important;
    }

    .print-font2 {
        border:solid 0px #e8e6e600 !important;
        padding:10px 30px 0px 30px !important;
        font-size:14px !important;
        font-family: calibri !important;
        text-align: justify !important;
    }
    .print-font {
        padding: 10px 50px 45px 50px !important;
        border:solid 0px #e8e6e600 !important;
        font-size:14px !important;
        font-family: calibri !important;
        text-align: justify !important;
    }
    .warning-right {
        float: right !important;
        padding-right:30px !important;
    }
    .warning-mar {
        margin-top: 6px !important;
    }
    .war-margin1 {
        margin-top: 20px !important;
    }
    .warning-mar2 {
        margin-top: 8px !important;
    }
    .warning-top-mar {
        margin-top: 160px;
    }
    .bor-bot {
        border-bottom: solid 1px #000 !important;
    }
    .mima-logo {
        height: 66px !important;
    }
    .print-font-size {
        font-size:11px !important;
    }
    .print-head-size {
        font-size:20px !important;
    }
    .print-font-size2 {
        font-size:20px !important;
    }
    .print-sett {
        line-height: 9px !important;
        font-size: 11px !important;
    }
    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
        border:solid 1px #000 !important;
    } 
    .print-container {
        height:100% !important;
    }   
    .p-sett {
        visibility:hidden !important;
        color:#FFF !important:
    }
    .last-page {
        visibility:hidden !important:
    }
    .page-break {
        page-break-before: always !important;
        padding: 10px 0px 10px 0px!important;;
    }
    .page-break2 {
        page-break-before: always !important;
        padding: 10px 0px 10px 0px!important;
    }
}

https://jsfiddle.net/xm67vdph/

如何正确获取每个重复打印页面上的背景图像？

1 个答案: