打印屏幕问题

我想为大学创建ID卡，并且我在html（模式）中创建了它，但是当我按下打印按钮时，它只是打印背景并且没有显示任何内容。身份证上的模态：打印屏幕问题

ID卡中的打印页：

代码：

<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> [email protected] <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>

来源

2016-04-13 swap

请问您可以在[小提琴]（https://jsfiddle.net/）左右重现该问题...... – Lal

我试图建立一个小提琴出来，但它似乎很难测试打印功能通过codepen ...我删除了我的最后一个答案，因为它不适用于您的问题。但是，我可以问一下z-index的div是什么意思？因为这可能会将背后的东西放在背景之下... –

@AaronLavers：其实我试图把背景放在文字的背面，这样文字就可以在前面看到，但是它的效果很好。 – swap

当调用@print风格，你.div类设置所有内容都是图片的内容（使用content：属性）。相反，你应该设置使用

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

那么你的背景图片，你应该命名主卡DIV，和目标是，而不是仅仅针对.div。因为现在你的风格的方式，它会为DOM中的每个div设置背景图像，大小和边框。

来源

2016-04-13 06:21:48

奇怪的是，尽管你的答案是35分钟，但我没有看到它，并发布了类似的答案。因为你的回答已经正确地识别了问题，所以再次删除它。 – Paul

@Aaron Lavers：当我将内容更改为背景时，它无法正常工作，但显示的文本并未以正确的格式显示。而且我还增加了课程，而不是针对所有的div。 – swap

@保罗是的我删除了它，然后编辑并取消删除它哈哈。抱歉! –

打印屏幕问题

回答

相关问题