如何正確獲取每個重復打印頁面上的背景圖像？

Question

我有一個html頁面，它從數據庫中獲取內容，並根據該內容的行為打印頁面。 問題是在每個打印頁面上背景圖像設置不正確。 背景圖像在每個打印頁面上的作用都像水印一樣。

每個打印頁面上的背景圖像結果應如下所示：

但是我得到的印刷結果是這些問題。

1）單張打印頁面中的圖像顯示兩次。

2）第二個主要問題是，內容完成后，圖像將顯示為一半。

這是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/