【问题标题】：Printable Bootstrap content可打印的引导内容
【发布时间】：2017-01-12 18:34:11
【问题描述】：

我目前正在使用 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 中打印它，即使我选中了，我得到的只是一个没有图像的空白页。

如果我禁用引导程序（删除<link>），那么一切正常。

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

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

没有解决我的问题。

我该如何解决这个问题？

【问题讨论】：

标签： html css twitter-bootstrap google-chrome

【解决方案1】：

使用此CSS 代码：

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

【讨论】：

【解决方案2】：

这些是来自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;
}

【讨论】：

在我的版本中它说background:0 0!important;，但删除它解决了我的问题。