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

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;
    }
}

标签： htmlcss

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/