html - 可打印的 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;
}