html - Div 图像背景在打印时被子表隐藏

Question

我制作了一张发票，它由一个 div 中的表格组成。

div 有一个背景图片。在常规屏幕 View 中，发票的背景运行良好。查看屏幕 View : See screen view

但是在打印预览中，div 背景被表格隐藏了。 See print view

如何使打印预览与我在屏幕上看到的一样？我不希望表格隐藏 div 背景图像。

HTML:

<div class="invoices">
<div ng-repeat="table in invoicesTables">
    <div class="header row"><br>
        <div style="margin-bottom: 20px;" class="col-xs-12">
            <img src="src/print_statement.PNG" alt="">
        </div>
        <div class="col-xs-4">
            <h5>Customer: <strong style="font-size: 12pt">{{client.Name}}</strong></h5>
        </div>
        <div class="col-xs-4">
            <h5 class="invoiceNumber">Invoice No.: <strong style="font-size: 13pt; color:red">{{table.invoiceNumber}}</strong></h5>
        </div>
        <div class="col-xs-3">
            <h5>
                <span>Date: </span><strong style="font-size: 12pt;">{{today | date: fullDate}}</strong>
                <!-- <span style="float:left">From: </span><strong style="font-size: 12pt; float:right;">{{table.startDate | date: fullDate}}</strong>
                </br></br>
                <span style="float:left">Till: </span><strong style="font-size: 12pt; float:right;">{{table.endDate | date: fullDate}}</strong> -->
            </h5>
        </div>
    </div>
    <div class="invoicebg">

        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Delivery No.</th>
                    <th colspan="2">Description</th>
                    <th>Amount</th>
                </tr>
            </thead>

            <tbody>
                <tr ng-repeat="i in table.tableInvoices | orderBy : '-Date' | reverse ">
                    <td>{{i.Date | date: fullDate}}</td>
                    <td>{{i.Id}}</td>
                    <td colspan="2">{{i.Name}}</td>
                    <td>{{i.Amount | number : 2}}$</td>
                </tr>
            </tbody>

        </table>
        <div ng-style="emptySpaces[$index]"></div>


        <div style="font-weight:bold" class="tfoot row">
            <div class="col-xs-3" style="border-top:2px solid black;">
                أو ما بعادله بالليرة اللبنانية
            </div>
            <div class="col-xs-7" style="border-top:2px solid black; background-color:lightgray;">
                {{table.totalInLetters}} Dollars <span style="float:right;">فقط</span>
            </div>
            <div class="col-xs-2" style="border:2px solid black;">
                {{table.total | number: 2}}$
            </div>
        </div>
    </div>
</div>

CSS:

.invoicebg{
    -webkit-print-color-adjust: exact;
    background: url('../src/invoicewatermark.png');
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center ;
}

谢谢

Answer 1

试试这个，把你的 css background:none !important 放到你的表中，如果不起作用也试着把那个属性放到 tr 和 td 也告诉我们进展如何