jquery - 打印屏幕问题

Question

我想为大学创建 ID Card，我在 html(模态)中按照我的意愿创建了它，但是当我按下打印按钮时，它只打印背景，上面没有显示任何内容。模态身份证:

打印页面上的身份证:

代码:

  <style>
            @media print
            {    
                div {
                    content:url(dist/img/bahtiid.png);
                    width: 323.527559055px;
                    height: 204.018897638px;
                    border: 1px solid black;
                }
                .img {
                    content:url(dist/img/user2.jpg);
                    width: 90px;
                    height: 100px;
                }
                .no-print, .no-print *
                {
                    display: none !important;
                }
                .print, .print *
                {
                    display: block;
                }
            }
            @page {
                size: auto;   /* auto is the initial value */
                margin: 0;  /* this affects the margin in the printer settings */
            }
        </style>
     <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header no-print">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body print">


                    <div style="width:323.527559055px; height:204.018897638px; border: 1px solid black; background-image: url(dist/img/bahtiid.png);background-size: 323.527559055px 204.018897638px; z-index:-1;">
                    <div class="col-md-12 print">

                        <br /><br /><br />
                        <div class="col-md-9 print" style="font-size:12px; margin-left:-10px">
                            <b> Name : </b> Swapnil J Khadke <br />
                            <b> Address : </b> 29, sadguru nagar, MIDC Area, Jalgaon. <br />
                            <b> Class : </b> ENGG 
                            <b> Year : </b> 2016-17 <br />
                            <b> DOB : </b> 16-11-2016 
                            <b> Blood Group : </b> O+ <br />
                            <b> Email : </b> swap.wk@gmail.com <br />
                            <b> Mobile : </b> 9999999999 <br />
                        </div>
                        <div class="col-md-3 pull-right" ><img class="img" src="dist/img/user2.jpg" style="width:90px; height:100px; margin-left: -40px; margin-top: -2px;"></div>
                    </div>

                    </div>

                  </div>
                  <div class="modal-footer no-print">
                    <button type="button" class="btn btn-default" onclick="myFunction()" >Print</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>

Answer 1

当 @print 样式被调用时，您的 .div 类将其所有内容设置为图像(使用 content: 属性)。相反，您应该使用

设置背景图片

background: url(......) no-repeat top center;

然后，您应该命名主卡片 div，并定位它而不是仅仅定位 .div。因为您的样式现在是这样的，它将为 DOM 中的每个 div 设置背景图像、大小和边框。