可打印的Bootstrap内容

Question

我目前正在使用 Bootstrap 3.3.7 以及大量自定义CSS处理项目，但我无法生成可打印的内容。

一个小例子

.bg-stretch {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-size: cover;
	background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg");
}

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="bg-stretch"></div>

这会生成看起来很好的图片背景，但是如果我尝试使用 Ctrl + P 在Google Chrome中打印它，即使我有选中，我得到的是一张没有图片的空白页。

如果我禁用bootstrap（删除<link>），那么一切都运行良好。

我尝试使用this question中发布的答案解决此问题，但将CSS添加到

@media print {
    /* Your styles here */
}

没有解决我的问题。

我该如何解决这个问题？

Answer 1

这些是来自bootstrap.css文件的样式。

@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
}

尝试从此处删除background: transparent !important。

或者，您可以在CSS中将!important规则添加到后台：

.bg-stretch {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-size: cover;
  background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg") !important;
}

Answer 2

使用此CSS代码：

@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}