Question

我只是想知道如何在bootstrap中的div中打印背景图像。我可以在页面中看到图像，但是当我尝试打印时它不在那里。

这是我的HTML

  <div class="row">

	<div class="col-p-3 card">1</div>
	<div class="col-p-3 card">1</div>
	<div class="col-p-3 card">1</div>
	<div class="col-p-3 card">1</div>
    
 </div>

这是我的css

@media print {
  .col-p-1, .col-p-2, .col-p-3, .col-p-4, .col-p-5, .col-p-6, .col-p-7, .col-p-8, .col-p-9, .col-p-10, .col-p-11, .col-p-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;


   margin-right: auto;
   margin-left: auto;
  }

   .card{
    height: 200px;
    width:200px;
    background-image: url('card.jpg');
  }
}

我可以打印整页的背景图像。我按照这个链接，如何只为div打印？非常感谢任何帮助

Answer 1

你的代码，原样，将真正打印4个div与背景 - 只是测试它。您可以在DevTools中的Google Chrome中进行演示＆gt;更多工具＆gt;渲染设置＆gt;模拟CSS媒体＆gt;打印。我会在除代码之外的其他地方寻找修复。

Answer 2

对于任何与我有同样问题的人，这是可能的解决方案。 Web浏览器默认禁用背景图形，请确保启用背景图形。这家伙真的帮我解决了这个问题 https://stackoverflow.com/a/3894013/6098616

如何在twitter bootsrap中打印背景图像

2 个答案: