打印屏幕問題

我想爲大學創建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

@保羅是的我刪除了它，然後編輯並取消刪除它哈哈。抱歉! –

打印屏幕問題

回答

相關問題